Data tables table plug in for jquery
-
Upload
arifur-rahman-sazal -
Category
Education
-
view
268 -
download
1
Transcript of Data tables table plug in for jquery
DataTables Table plug-in for jQuery
1
Arifur RahmanSoftware EngineerBrain Station-23
What is DataTable ?DataTables 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.
2
3
Installation<table id="table_id" class="display">
<thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table>
4
Installation contd.
<script type="text/javascript"> $(document).ready(function () { $('#table_id').DataTable(); }); </script>
5
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>datatables.net</title> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css"> </head> <body> <table id="table_id" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function () { $('#table_id').DataTable(); }); </script> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script> </body></html>
6
Feature enable / disable$(document).ready(function () {
var settings = { dom: '<lf<t>ip>', //DOM positioning
paging: true, sort: true,
searching: true, data: data, //JSON Data to render grid
lengthMenu: [[10, 20, 50, -1], [10, 20, 50, "All"]], columns: columns
} $('#example').DataTable(settings); });
7
Column settingscolumns = [ { 'data': 'ID', 'className': 'hide_me row_id', 'sortable': false, 'searchable': false }, { 'data': 'Name' }, { 'data': 'CheckListItemType', 'sortable': false, 'searchable': false, "render": function (val) { var Admin = 3; var data = (val == Admin) ? '<input type="checkbox" disabled checked />' : '<input type="checkbox" disabled />'; return data; } } ];
8
DOM Positioningdom: ‘<"wrapper"flipt>’
<div class="wrapper"> { filter } { length } { info } { paging } { table }</div>
dom: ‘<lf<t>ip>’
<div> { length } { filter } <div> { table } </div> { info } { paging }</div>
9
StylingBootstrap :https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.jshttps://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css
Foundation :https://cdn.datatables.net/1.10.9/js/dataTables.foundation.min.jshttps://cdn.datatables.net/1.10.9/css/dataTables.foundation.min.css
jQuery UI ThemeRoller :https://cdn.datatables.net/1.10.9/js/dataTables.jqueryui.min.jshttps://cdn.datatables.net/1.10.9/css/dataTables.jqueryui.min.css
10
Server Side Integration
$(document).ready(function () { $('#example').DataTable({ "processing": true, "serverSide": true, "ajax": "/Home/DataHandler" });});
11
public class DTParameters{
public int Draw { get; set; }public DTColumn[] Columns { get; set; }
public DTOrder[] Order { get; set; } public int Start { get; set; } public int Length { get; set; } public DTSearch Search { get; set; }}
Server Side Integration cont.12
Reference13
Plugin : https://datatables.net/
Server side integration : https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server-side
?14