Data representation in form of tables and grid is one of the most import web component. Generally we need to perform sorting, pagination on it, which is very complex task to do. To solve this problem, many grid view framework are there. Well, among these frameworks, DataTable is most popular. Features like open source, light weighted, highly flexible and customizable, features like AutoFill, inline editor, sticky header, responsiveness, bootstrap support and foundation are the reasons behind its popularity.
In basic initialization datatable provides pagination, sorting, instant searching by loading whole data records at once. It can be a performance issue fetching large amount of data from server side. It will be better if you integrate server side pagination, searching and sorting, so we can break large amount data in chunk, So performance will increase significantly.
Let’s have a look about using and customizing it. We need to include plugin files (js & css) and fetch data from MySQL database using php.
You can download the source code from here and if you get any problem while understanding or implementing it, feel free to ask in the comment section.
In basic initialization datatable provides pagination, sorting, instant searching by loading whole data records at once. It can be a performance issue fetching large amount of data from server side. It will be better if you integrate server side pagination, searching and sorting, so we can break large amount data in chunk, So performance will increase significantly.
Let’s have a look about using and customizing it. We need to include plugin files (js & css) and fetch data from MySQL database using php.
$(document).ready(function() { var dataTable = $('#employee-grid').DataTable( { "processing": true, "serverSide": true, "ajax":{ url :"employee-grid-data.php", // json datasource type: "post", // method , by default get error: function(){ // error handling $(".employee-grid-error").html(""); $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); $("#employee-grid_processing").css("display","none"); } } } ); });
You can download the source code from here and if you get any problem while understanding or implementing it, feel free to ask in the comment section.
Comments
Post a Comment