In this video we will discuss how to use database data with jQuery datatables plugin. We want to retrieve data from the following database table tblEmployee. The database data should then be.
20 Nov 2014CPOL
Simplest way to add Sorting, Filtering, Paging and many features to your plain HTML table
Introduction
In this tip, I'll explain how to have basic HTML table features like Sorting, Searching, and Paging with just one line of code using jQuery
DataTable
s as these features are a must have for all tables and grids. Brief Note
To have Sorting, Searching, and Paging for a table, it takes lot of efforts to write code to have all these features. But jQuery
Datatable
is here to rescue you. jQuery
DataTable
s support both client side processingand as well asserver side processing. Here, I will discuss client side data processing. For details regarding server side, refer to www.datatables.net. When to Use Server Side and Client Side ??
If you are well aware that your record count will not exceed 10,000 records, then go for client side, else choose server side.
Let's Start
![Data Table In Jquery Data Table In Jquery](/uploads/1/2/5/7/125700458/562765773.png)
jQuery
Let's assume you have a plain HTML table as below. I am using ASP.NET MVC razor view for this tip. Below is a plain HTML table of razor view. Don't get confused with the Class names I have used here. You can leave the Class attribute blank .
Datatable
s work on plain HTML tables, so it doesn't matter what server side technology you use. Either you use .NET or Java or PHP or whatever it may be.Let's assume you have a plain HTML table as below. I am using ASP.NET MVC razor view for this tip. Below is a plain HTML table of razor view. Don't get confused with the Class names I have used here. You can leave the Class attribute blank .
And its output is as follows, as you can see an HTML table without any features like Paging, Sorting, Searching, etc.
Now let's apply the
DataTable
s to our plain HTML table and see the reaction of that. Note: In order for jQuery DataTable to work, three components are important:
- Table ID
- <thead>
- <tbody>
You must specify these three in your HTML table.
Below is the code for using data table. This tip assumes you know the basics of jQuery.I have applied the
Datatable
on the above HTML table using its ID 'table_id
' .And reference the following JS and CSS so that our
DataTable
can act: Now save your application, and hit the button to RUN and see
DataTable
s in Action. Our Plain HTML table turned in to a fantastic table with all features Sorting, Filtering, Paging.
Ok. I know what you are thinking. You are thinking that the table style is very simple. So come on, let's have a good style of your choice .You may be thinking how to style the table with CSS and jQuery. Not needed. Just Remove the old CSS and JS references which you added earlier and replace with this one.
Now let's run our app and see the result:
Looks fine. Isn't it ?? We have styled our
Datatable
perfectly. No efforts we have taken so far. I mean just minimum efforts. We have not written any server side code, no jQuery or JavaScript code. Nothing, just with few steps, we have got awesome results. Still not satisfied with the theme ??
Follow the above link, select 'Gallery' Tab and choose the theme you like, just note down the name of the theme and replace the name here.
You have already added the above link. Just change the name. Here, the theme name is 'Smoothness'. Replace this with your theme name. Your selected theme will be applied, and you can see the new theme in action.
Till now, what I have discussed is just the basics of
DataTable
. To customize the table more, we need to pass some parameters. Here, I will discuss some examples on customizing the table.- In the paging section, you can see only Previous and Next buttons are displaying, now we customize our table to display First Previous Next Last buttons, just pass a parameter as below. Hope you got the result !!!
- By default, the number of records per page is displaying 10 ,25 ,50 ,100 in drop down List . We can customize it according to our needs. An example is shown below:
- If you select 100 records per page, the table grows longer, isn't it. So we need a fixed sized table so that even if we choose 1000 records per page, the size of the table will remain constant, a vertical scroll bar will appear in the table to scroll down the records.
- Ok. If you don't need some features like searching or sorting or paging. You can disable them too by passing specific parameters.
Still need more and more and more features and customization, refer to the below site:
- http://www.datatables.net/
Interested to know your feedback or any mistakes I have made, since this is my first post on CodeProject.
Points of Interest
DataTable
s is a plug-in for the jQuery JavaScript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.History
- 21st November, 2014: Initial version