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

http://jquery.com/

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>  <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>  <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>  <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

https://datatables.net/

https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server-side

?14

Education

Data tables table plug in for jquery