20 Nov 2014CPOL
JQuery DataTables takes the plain HTML table and dynamically injects all elements you see in the figure above and attaches event handlers to them that manage all the interactions with the user. JQuery DataTables is an excellent jQuery plug-in that enables you to quickly and easily enhance your tables. What the DataTables plugin does is take a large table, paginate it, and allow the columns to be ordered, and the cells to be filtered. Setting up DataTables. Setting up DataTables involves setting up a table so that it has distinct and sections, and then simply running dataTable on it. As a reminder, tables in HTML have a header and a body.
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
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
This Datatable jquery tutorial help to parse
JSON data
which was received from server side.I got huge response from reader on datatable tutorials,i am sharing next level datatable tutorial with php and mysql,I am extending Datatable Pagination, Sorting and Search – Server Side (PHP/MySQl) Using Ajax.Sometimes we need to add some text,process json data or filter JSON object data before to send datatable jQuery table.I am using Datatable in-build call back
dataSrc()
function which will parse JSON data as your requirement and send to datatable.This tutorial will help to achieve following milestone,
- Added Hyperlink(Anchor HTML tag) on column in jquery datatable.
- Added
img
HTML tag in tabletd
column. - Added edit/delete and view action button.
Also Checkout other tutorial of jQuery Datatable,
I am are using below Files in this tutorial
Index.php -
This file will responsible to create html and instance datatable using jquery code.response.php -
This file responsible to create database connection string and convert records into json string and returns data to Ajax method as response.connection.php -
This file responsible to create mysql database connection.I already mentioned in this post i am extending Datatable Pagination, Sorting and Search – Server Side (PHP/MySQl) Using Ajax, so i assumed you have read and understand that tutorial.
How to parse JSON data in jQuery Datatable
Step 1: we will create new
profile_image
column in employee
table. This column will store profile image path.ALTERTABLE`employee`ADD`profile_image`VARCHAR(255)NOTNULLDEFAULT'images/default_profile.png'AFTER`employee_age`; |
Step 2: Added
profile_image
column in $column
array in response.php
file.2 4 6 8 | $columns=array( 1=>'employee_name', 3=>'employee_age', ); |
Step 3: Added
profile_image
and Action
column in HTML table header and footer heading in index.php
file.2 4 6 8 10 12 14 16 18 20 | $('#employee_grid').DataTable({ ..... for(vari=0,len=jsonData.data.length;i<len;i++){ jsonData.data[i][4]='<img src='https://www.phpflow.com/php/parse-json-data-jquery-datatable/'/>'; jsonData.data[i][1]='<a href='http://www.phpflow.com' target='_blank'>'+jsonData.data[i][1]+'</a>'; jsonData.data[i][5]='<div><a href='#' target='_blank'>Edit</a><a href='#' target='_blank'>Delete</a><a href='#' target='_blank'>View</a></div>'; } } }); |
as you can see above code, I am adding following functionality,
- Adding img html tag with profile_image column value
- Adding href attribute on each name column value
- Adding new column Action column which will take edit/delete and view anchor tag
Conclusion
We have learn how to parse received server JSON object in client side and send to jQuery datatable.This jQuery tutorial help to add or modified JSON object before render datatable in HTML table format.We have added Image and anchor HTML tag with column value in
td
.You can download source code and Demo from below link.