Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Friday, February 9, 2018

How to add filter, search and pagination options to your table using javascript & datatable?

Having pagination, search and filter options to your data table is very much essential. which changes the complete view of your table presentation.

Here is the simplest way of adding these three options to your table.
Add this block of code in your head section.
<link rel="stylesheet" 
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" 
src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
</script>
<script>
    $(document).ready(function() {
        $('#example').DataTable();
    } );
</script>
Then add id and class to your table tag
<table id="example" class="display">
    <thead>
    <tr>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
    </tr>
    </tbody>
</table>
That's it your are done with the most usefull feature for tables.
Result:

Reference & For more vistit the link of official datable organization
https://datatables.net/examples/basic_init/zero_configuration.html

7 comments:

  1. Thank you so much for providing such a useful content. Digital Signature Certificate

    ReplyDelete
  2. Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog, This was the first news blog. Class 2 Digital Signature Certificate

    ReplyDelete
  3. Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog, This was the first news blog. Class 2 Digital Signature Certificate

    ReplyDelete
  4. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW