jquery datatable simple n effective example

hello guys,

let’s go for very simple DataTables example which is filled by jquery ajax call.

Import bellow file in your html heading section

!!! note :–  just replace > with > (end tag)

<link rel=”stylesheet” type=”text/css” href=”http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css”&gt;
<link rel=”stylesheet” type=”text/css” href=”http://datatables.net/media/blog/beautiful_tables/complete.css”&gt;
<script type=”text/javascript” charset=”utf8″ src=”http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js”&gt;

JQuery function

        	type: "GET",
		data: {data: pass ur data},
           	url:  "give your php file url here",
            	contentType: "application/json; charset=utf-8",
            	success: function(data) {
		$('#table').append("<tr><td>YOUR DATA HERE</td></tr>"); 
                   "sScrollY": 200,
                   "bJQueryUI": true,

HTML code for table

<table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”ausgroup” width=”80%”>
<th>Your Heading </th>


some important option listed bellow

“bJQueryUI”: true,       — for UI css of Table
“bPaginate”: false,        — for Pagination
“bLengthChange”: false,
“bFilter”: true,                — for filter
“bSort”: true,                 — for sorting

Redraw Datatable with fresh data

	            type: "GET",
	            url: "your url",
        	    success: function(data) {
		       if (typeof oTablelb != 'undefined') 
		        $('#lbtable').append("<tr><td>your data</td></tr>"); 
                                  "bDestroy": true, 
                                  "sScrollY": 200, 
                                  "bJQueryUI": true, 

just set bellow property

1) if (typeof oTablelb != 'undefined') oTablelb.fnClearTable();

2) "bDestroy": true,

now run your file,  DataTable will reload fresh data based on ajax call.  🙂

hope you like it!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s