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

Read More...

JQUERY Explainded

Today we will try to discuss language that has been growing steadily Jquery with the newest update.

Jquery :  Is a script-based programming language combined with the Javascript language. Jquery language helps us to facilitate the work of our website, especially for the website speed up the process of the data from the other side before displaying data to our end landing website.

Jquery inventor himself (John Resig and perfected by Dean Edwards') have tested this script, which until now has been the latest version (v2.1.1 or quoted 1:11:11 www.jquery.com) and will continue to be developed and continually refined for comfort and better capabilities and relevant in the present data on our website end landing.

Here are some examples of the application of language Jquery :
A. DOM Traversal and Manipulation 
Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'
1. $( "button.continue" ).html( "Next Step..." )

B. Event Handling
Show the #banner-message element that is hidden with display:none in its CSS when any button in    #button-container is clicked.
1. var hiddenBox = $( "#banner-message" );
2. $( "#button-container button" ).on( "click", function( event ) {
3. hiddenBox.show();
4. });

C. Ajax 
Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text
1. $.ajax({
2. url: "/api/getWeather",
3. data: {
4. zipcode: 97201
5. },
6. success: function( data ) {
7. $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
8. }
9. }); 
  
That's all about Jquery Script Language, if you want to ask for something please leave a comment.
For more information about Jquery please see his website at http://jquery.com
if you want download the latest Jquery just Click Here
regard's and thank's for read.

Read More...