In web application gridview is very important part to show data in table format. A grid view or a datagrid is a graphical user interface element (widget) that presents a tabular view of data.
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:
- Variable length pagination
- On-the-fly filtering
- Multi-column sorting with data type detection
- Smart handling of column widths
- Display data from almost any data source
- DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
- Scrolling options for table viewport
- Fully internationalisable
- jQuery UI ThemeRoller support
- Rock solid – backed by a suite of 2900 unit tests
- Wide variety of plug-ins inc. Editor, TableTools, FixedColumns and more
- It’s free!
- State saving
- Hidden columns
- Dynamic creation of tables
- Ajax auto loading of data
- Custom DOM positioning
- Single column filtering
- Alternative pagination types
- Non-destructive DOM interaction
- Sorting column(s) highlighting
- Advanced data source options
- Commercial support available
- Fully accessible for screenreaders / keyboard access
- Sensible file size: 70K minified, 20K gzip’d
- Extensive plug-in support
- Sorting, type detection, API functions, pagination and filtering
- Fully themeable by CSS
- Solid documentation
- 130+ pre-built examples
Setting up DataTables
The first step is to obtain the library from the DataTables website. 1.9.4 is the current stable version and 1.10 is in development now. If you don’t want to download the files, you can also make use of theMicrosoft CDN. As it is a jQuery plugin you should include the jQuery library too, preferably the latest version.
Leats start..
DataTables can work with data from a verity of sources. It can directly work on an HTML table or we can specify data as an array while initialization. Or it can work on data coming from an Ajax source.
In this article we’ll create a listing of websites in the SitePoint network. We’ll start with the listing of a few site names, and then we’ll add more columns and features. Here we have an HTML table with one column that lists the names of just three sites. Let’s see what DataTables can do with a minimal setup.
</pre>
<html>
<head>
<link rel="stylesheet" type="text/<span class=" />css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
Myexample">
<table id="<span class="></table>
<thead>
<tr><th>Name</th>
<th>Technology</th>
<th>Site</th></tr>
</thead>
<tbody>
<tr><td>Pradeep</td>
<td>.NET</td>
<td>www.asp.net</td></tr>
<tr><td>Preet</td>
<td>Jquery</td>
<td>www.jquery.com</td></tr>
<tr><td>Atkari</td>
<td>MVC</td>
<td>www.asp.com/mvc</td></tr>
</tbody>
</table>
<script type="text/<span class=">// <![CDATA[
javascript</span>" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js">
// ]]></script>
<script type="text/<span class=">// <![CDATA[
javascript</span>" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js">
// ]]></script>
<script>
$(function(){
$("#Myexample").dataTable();
})
</script>
</body>
</html>
<pre>
You can try this code by yourself, just copy paste that HTML code and paste in notepad. save as .html after saving open that file in web browser (make script enable). that’s is you done and enjoy the view.
You can do everything with DataTable whatever you can do with GridView or much more than.
you can use array, serverside data fetching, sorting, searching, readonly column, runtime field editing and much more.
this is only brief introduction about datatable and you can find much more with datatable officially site. Its grate tool for web application.
Pradeep 