Open In App

How to make table searchable and sortable with pagination using jQuery?

Last Updated : 26 May, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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

<!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=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
         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=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">
        </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>

                    

                    

                        
                        
 
                    

                

                





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




                

                    

                        

                            

                                

                                    
                                    

                                    
                                    
                                    

                                    
                                    

                                    
                                    
                                    
                                

                            

                        

                    

                    
<!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=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              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=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">
        </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>

                    
    
                    

                

                

                    

                        
                        

                    

                    

                        
                        
 
                    

                

                





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.




                            
                            
                        


                                                                              

                                        

                                                                                

                                                                

                            
                                

                                
                                        Next Article
                                        
                                    
                                    
                                    

                                        jQuery UI Sortable appendTo Option
                                    

                                

                                                        

                        

                            

                                        

                                            

                                                

                                                

                                                    
G

        

            
        

        

                                                

                                                

                                                    geetanjali16                                                

                                                

                                                

            
                                            

                                            
                                        

                                        

                                            
                                            

                                                
                                                
                                            

                                            
                                                                            

                                    Improve
                                    
                                

                            
                                        

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                

                        


                                                

                        
                                                 

                                
Similar Reads

                                

                                    
                                

                            

                        


                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

                

        

            

                

                    

                    
                
 
                
                            

                                

                            


                            


            

        
  

        

                




	
	
	

	
	
	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    
















	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox