Data tables table plug in for jquery
•Download as PPTX, PDF•
0 likes•951 views
Data tables table plug in for jquery. It widely used for viewing tabular data. It can process all grid action on client site easily.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Data tables table plug in for jquery
Similar to Data tables table plug in for jquery (20)
Recently uploaded
Recently uploaded (20)
Data tables table plug in for jquery
- 1. DataTables Table plug-in for jQuery 1 Arifur Rahman Software Engineer Brain Station-23
- 2. 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. 3
- 4. 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
- 5. Installation contd. <script type="text/javascript"> $(document).ready(function () { $('#table_id').DataTable(); }); </script> 5
- 6. <!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
- 7. 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
- 8. Column settings columns = [ { '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
- 9. DOM Positioning dom: ‘<"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
- 10. Styling Bootstrap : https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css Foundation : https://cdn.datatables.net/1.10.9/js/dataTables.foundation.min.js https://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.js https://cdn.datatables.net/1.10.9/css/dataTables.jqueryui.min.css 10
- 11. Server Side Integration $(document).ready(function () { $('#example').DataTable({ "processing": true, "serverSide": true, "ajax": "/Home/DataHandler" }); }); 11
- 12. 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
- 13. Reference 13 Plugin : https://datatables.net/ Server side integration : https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server- side
- 14. 14