How to add jQuery DataTables into your Laravel projects?

Post Views: 59

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 :

Author
Recent Posts

Chandan Kumar

Software Engineer at Cotocus PVT LTD.

Be a Full Stack Developer and eager to learn new Technology.
Knowledge: CSS, Bootstrap, Javascript, PHP, WordPress, Joomla, Moodle, Laravel, AJAX, Jquery, Java, Dart, Flutter, Photoshop, CorelDraw, Pagemaker
& Office Package