FooTable: a jQuery Plugin for Responsive Tables

Here is the FooTable from JQuery, this is responsive table that we can use for our report for office, personal, and other information.

Great things and we will discussion here in bellow :
Before we say this project, download it before from this link :
Get the source from Github, or you can download it direct.

Demos & Documentation 

1. At the head of your html just paste this code : 

1.  It's also likely that you have your own breakpoints. That is very easy to configure as you call the plugin. 



$('table').footable({
  breakpoints: {
    mamaBear: 1200,
    babyBear: 600
  }
}); 

2. And at the last setup your coloumns like this bellow :



 


    

      
First Name
      
      
Last Name
      
      
Job Title
      
      
DOB
      
      
Status
      
    




3. You can quite easily tell, just from the markup, that the table will work in the following way:
   - The table will be filtered by an input with id "filter" (data-filter="#filter")
   - The table will be sorted initially by the First Name column and it will be sorted in descending order (data-sort-initial="descending")
   - The Last Name column cannot be sorted (data-sort-ignore="true")
   - The Job Title and DOB columns will be hidden on phone and tablet (data-hide="phone,tablet")
   - The Status column will be hidden on phones (data-hide="phone")
   - The DOB and Status columns use numeric data (data-type="numeric")
   

just see the demo in here :
DEMO SORTING

thank for read this tutorial and also i say thanks to http://css-tricks.com

You May Also Like this Article