Thursday, June 16, 2016

DataTables in Laravel | How to add DataTables in your Laravel Project?


datatable demo


Hello guys!
Hope you're doing well. Today I'm gonna take a very small session but it's very important for all. Because today i'm gonna show you how can you add DataTables (a jQuery Plug-in) in your laravel project. Why DataTables?
because it provides you pagination, instant search and multi-column ordering. More want to know DataTables? Just go the through the following link:




So Let's start the session.

1, As you see in data tables, you will use where you will show large quantity of data in front side of your application. So in order to show this list of datas, you need to use table tag. And write your table tag ( <table></table> ) with an 'id' Like this :

<table  class="table table-striped table-bordered"  id="example">

          ....

          ....

          ....
</table>



2.  Before your closing body tag ( </body> ) add the following JavaScript code in order to  show the DataTables for the above table.


<script>

  $(document).ready(function()

     {

         $('#example').DataTable();

     });

  </script> 


3. Forgot to mention, use the following script  in your header tag ( <head></head> ) also.

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script‌​>

That's it, you'll see a nice DataTables in your front side page with pagination and search engine.

That's for today. See you in next session. Thank you!  





Related Articles

0 comments:

Post a Comment