Skip to content
Related Articles

Related Articles

How to make table searchable and sortable with pagination using jQuery?
  • Last Updated : 10 Dec, 2020

The jQuery fancyTable plugin helps the developers to design HTML tables that are searchable and sortable with pagination feature. This plugin is totally based on JavaScript and HTML.

Official website for plugin: Please take care of file paths while implementing the codes.

https://github.com/myspace-nu/jquery.fancyTable

Example 1: The following code demonstrates the simple search and sort with pagination using the jQuery fancyTable plugin.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" 
              ontent="width=device-width, 
                 initial-scale=1, shrink-to-fit=no">
          
        <link href=
         rel="stylesheet">
    </head>
    <body><br/>
      
        <div class="container">
            <h3 style="">
              Table with search and sortable headings 
            </h3>
            <table id="mytableID" style="width:100%" 
                   class="table table-striped sampleTable"
            <tr
                <th>Firstname</th
                <th>Lastname</th
                <th>Age</th
            </tr
            <tr
                <td>Priya</td
                <td>Sharma</td
                <td>24</td
            </tr
            <tr
                <td>Arun</td
                <td>Singh</td
                <td>32</td
            </tr
            <tr
                <td>Samy</td
                <td>Watson</td
                <td>41</td
            </tr
            <tr
                <td>Samsamder</td
                <td>Watra</td
                <td>42</td
            </tr
            <tr
                <td>Samantha</td
                <td>Challa</td
                <td>31</td
            </tr
            <tr
                <td>Samuel</td
                <td>Miranda</td
                <td>45</td
            </tr
            <tr
                <td>Samy</td
                <td>Joseph</td
                <td>37</td
            </tr
                  </table
              
        </div>
        <script  src=
        </script>
        <script src=
        </script>
        <script src="fancyTable.js">
        </script>
        <script type="text/javascript">
              
            $(document).ready(function() {
                $(".sampleTable").fancyTable({
                  /* Column number for initial sorting*/
                   sortColumn:0,
                   /* Setting pagination or enabling */
                   pagination: true,
                   /* Rows per page kept for display */
                   perPage:3,
                   globalSearch:true
                   });
                              
            });
        </script>
    </body>
</html>

chevron_right


Output: 



  • Before Execute:

  • Search execution:

  • Pagination output:

Example 2: The following example demonstrates other options like globalSearchExcludeColumns and use of data-attributes like data-sortas=”case-insensitive”. It also handles callback functions like onInit() and onUpdate(). The developer can make use of other option settings as per the need.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,
                    initial-scale=1, shrink-to-fit=no">
          
        <link href=
              rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <h3>Table with sortable headings and global search</h3>
            <table id="tableID" class="table table-striped">
                <thead>
                 <tr>
                    <th data-sortas="case-insensitive">Firstname</th>
                    <th>Lastname</th>
                    <th>Profession</th>
                    <th data-sortas="numeric">Age</th>
                    <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>John</td>
                    <td>Caprio</td>
                    <td>Engineer</td>
                    <td>37</td>
                    <td>Hyderabad</td>
                     </tr>
                     <tr>
                    <td>Bikram</td>
                    <td>Sharma</td>
                    <td>Businessman</td>
                    <td>42</td>
                    <td>Delhi</td>
                     </tr>
                      <tr>
                    <td>Amit</td>
                    <td>Chowdhary</td>
                    <td>Engineer</td>
                    <td>58</td>
                    <td>Chennai</td>
                     </tr>
                       <tr>
                    <td>Thomas</td>
                    <td>Einstein</td>
                    <td>Scientist</td>
                    <td>35</td>
                    <td>Mumbai</td>
                    </tr>
                </tbody>
            </table>            
        </div>
          
        <script  src=
        </script>
        <script src=
        </script>
        <script src="fancyTable.js"></script>
        <script type="text/javascript">
                  
            $(document).ready(function(){
              
                $("#tableID").fancyTable({
                   sortColumn:0,
                   /* Setting pagination or enabling */
                   pagination: false,
                       globalSearch:true,
                    /* Exclude 2nd column from global search.*/
                   globalSearchExcludeColumns: [2],
                   onInit:function(){                 
                   /* On initialization of table */
                                 console.log({ element:this });
                                    },
                   onUpdate:function(){
                   /* On update like search and sort of table */                  
                    console.log({ element:this });
                   }
                       });                            
            });            
        </script>
    </body>
</html>

chevron_right


Output:

  • Data attribute usage: The following shows the output after the use of data attributes.
  • Exclude column from search: The following output shows the exclusion of the second column from the search feature.
  • Callback functions output: the following output displays the console after function initialization and update.

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :