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;
</script>

JQuery function

$.ajax({
        	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>"); 
                $('#table').dataTable({
                   "sScrollY": 200,
                   "bJQueryUI": true,
               }); 
            } 
 });

HTML code for table

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

Note

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

     $.ajax({
	            type: "GET",
	            url: "your url",
        	    success: function(data) {
		       if (typeof oTablelb != 'undefined') 
		        oTablelb.fnClearTable();
		        $('#lbtable').append("<tr><td>your data</td></tr>"); 
                        oTablelb=$('#lbtable').dataTable({ 
                                  "bDestroy": true, 
                                  "sScrollY": 200, 
                                  "sScrollX":400, 
                                  "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!!