MOTOSHARE 🚗🏍️

Rent Bikes & Cars Directly from Owners

Motoshare connects vehicle owners with people who need bikes and cars on rent. Owners earn from idle vehicles, and renters get flexible ride options.

Visit Motoshare

How to add jQuery DataTables into your Laravel projects?

Laravel
Posted on | by Chandan Kumar
Post Views: 145

First of all, let’s discus here, What is DataTable?

Datatable is a plugin for jQuery JS Library. it’s really flexible tool. it provides the search, filter & pagination and it’s also mobile friendly.

📚 Step 1 : Open Datatables website (URL )

📚 Step 2 : Copy CSS & JS CDN Link from Home page 

//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js

📚 Step 3 : Add it to your blade file. just see below how to add these css and js cdn links into your particular pages.

@section('css')
   <link rel="stylesheet"href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
@endsection

📚 Step 4 : Now Adding JS CDN

@push('scripts')
   <script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js">
@endpush

📚 Step 5 : Add one more script which is the ID of your table where you are going to active your datatable. if you will see below code then you will find a ID (#myTable). it is your table id. in your case it will be something else.

<script>
		$(document).ready( function () {
			$('#myTable').DataTable();
		} );
</script>

❗ Note : if you are using DataTable into your particular page then only add in that particular file and if you are going to use it multiple places then add it to your main file like app.blade.php .

Hey friends after following above steps you will find your view like below image :

Chandan Kumar
Latest posts by Chandan Kumar (see all)