Download - Data tables table plug in for jquery
![Page 1: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/1.jpg)
DataTables Table plug-in for jQuery
1
Arifur RahmanSoftware EngineerBrain Station-23
![Page 2: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/2.jpg)
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
![Page 3: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/3.jpg)
3
![Page 4: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/4.jpg)
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
![Page 5: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/5.jpg)
Installation contd.
<script type="text/javascript"> $(document).ready(function () { $('#table_id').DataTable(); }); </script>
5
![Page 6: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/6.jpg)
<!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
![Page 7: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/7.jpg)
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
![Page 8: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/8.jpg)
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
![Page 9: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/9.jpg)
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
![Page 10: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/10.jpg)
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
![Page 11: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/11.jpg)
Server Side Integration
$(document).ready(function () { $('#example').DataTable({ "processing": true, "serverSide": true, "ajax": "/Home/DataHandler" });});
11
![Page 12: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/12.jpg)
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
![Page 13: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/13.jpg)
Reference13
Plugin : https://datatables.net/
Server side integration : https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server-side
![Page 14: Data tables table plug in for jquery](https://reader036.vdocuments.site/reader036/viewer/2022062503/58ec82d81a28abcb528b45a5/html5/thumbnails/14.jpg)
?14