Today I will write about jquery most used plugin called Jquery Datatables, Unlike many other JQuery plugins this has most flexible features, wast community, and good documentation.
Some important and most commonly used basic features are

• Fast as it executes at client
• Nice table design
• Pagination
• Define records per page
• Column wise sorting
• Search/Filter

Some other advanced features which are not mostly used but these are also very handy and time saving but to use these features you may need to add additional JS library.

• Show hide columns
• Export to CSV, PDF etc
• Columns re-ordering
• Fixed Header
• Fixed Column
• Ajax Server side processing
• And many more explore it at datatables.net

Jquery Datatables Requirements

To use any Jquery plugin or writing any JQuery code you will always need JQuery library (jquery.js).
and to use datatables basic features listed in first list above you just need jquery.dataTables.js file to get its basic functionality with basic or minimum design. You can also use dataTables.bootstrap.js to give a decent look to your table but this is not mandatory you can write your own designing code.

Minimum Code for using Jquery Datatables plugin

1- Write HTML page at head section include the following 3 files

1. jquery.js
2. jquery.dataTables.js
3. dataTables.bootstrap.js (this one is optional)

you can download it from datatables.net/download/packages it may have many other files too but search above 3 files and include in you head tag as show in the following code.

2- Write a script tag where you can write your own JQuery, and write ready function, inside ready function initiate datatable plugin it is easy just one line of code.

You can see running demos of jquery datatables plugin here at this link Datatable Demo

3- You can modify its default functionalities like sorting, searching, pagination and many other by providing as options to dataTable function we have written at line 21 in above code. try replacing line 21 with the following code and see the changes.


$('#my-table-1').dataTable({
paging: false,
ordering:false,
scrollY: 300,
});


Paging : false means remove pagination feature
ordering: false means remove sorting feature
scrollY: 300 means make table height=300 and show scrollbar

There are hundreds of other options open this official link Datatable options. explore it on you own, play with it and let us know if you have any problem.

This was the basic implementation of Jquery Datatables plugin with minimum libraries and minimum code required, we can do more advanced things with it by adding other libraries like I have listed in second list above.

keep on visiting codingsips for daily handy coding tips and short tutorials and second version of this tutorial datatables beyond the basics coming soon. where we will cover few commonly used advanced features of Datatables.