datatable.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /*=========================================================================================
  2. File Name: datatables-basic.js
  3. Description: Basic Datatable
  4. ----------------------------------------------------------------------------------------
  5. Item name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  6. Author: PIXINVENT
  7. Author URL: http://www.themeforest.net/user/pixinvent
  8. ==========================================================================================*/
  9. $(document).ready(function() {
  10. /****************************************
  11. * js of zero configuration *
  12. ****************************************/
  13. $('.zero-configuration').DataTable();
  14. /********************************************
  15. * js of Order by the grouping *
  16. ********************************************/
  17. var groupingTable = $('.row-grouping').DataTable({
  18. "columnDefs": [{
  19. "visible": false,
  20. "targets": 2
  21. }],
  22. "order": [
  23. [2, 'asc']
  24. ],
  25. "displayLength": 10,
  26. "drawCallback": function(settings) {
  27. var api = this.api();
  28. var rows = api.rows({
  29. page: 'current'
  30. }).nodes();
  31. var last = null;
  32. api.column(2, {
  33. page: 'current'
  34. }).data().each(function(group, i) {
  35. if (last !== group) {
  36. $(rows).eq(i).before(
  37. '<tr class="group"><td colspan="5">' + group + '</td></tr>'
  38. );
  39. last = group;
  40. }
  41. });
  42. }
  43. });
  44. $('.row-grouping tbody').on('click', 'tr.group', function() {
  45. var currentOrder = groupingTable.order()[0];
  46. if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
  47. groupingTable.order([2, 'desc']).draw();
  48. }
  49. else {
  50. groupingTable.order([2, 'asc']).draw();
  51. }
  52. });
  53. /*************************************
  54. * js of complex headers *
  55. *************************************/
  56. $('.complex-headers').DataTable();
  57. /*****************************
  58. * js of Add Row *
  59. ******************************/
  60. var t = $('.add-rows').DataTable();
  61. var counter = 2;
  62. $('#addRow').on( 'click', function () {
  63. t.row.add( [
  64. counter +'.1',
  65. counter +'.2',
  66. counter +'.3',
  67. counter +'.4',
  68. counter +'.5'
  69. ] ).draw( false );
  70. counter++;
  71. });
  72. /**************************************************************
  73. * js of Tab for COLUMN SELECTORS WITH EXPORT AND PRINT OPTIONS *
  74. ***************************************************************/
  75. $('.dataex-html5-selectors').DataTable( {
  76. dom: 'Bfrtip',
  77. buttons: [
  78. {
  79. extend: 'copyHtml5',
  80. exportOptions: {
  81. columns: [ 0, ':visible' ]
  82. }
  83. },
  84. {
  85. extend: 'pdfHtml5',
  86. exportOptions: {
  87. columns: ':visible'
  88. }
  89. },
  90. {
  91. text: 'JSON',
  92. action: function ( e, dt, button, config ) {
  93. var data = dt.buttons.exportData();
  94. $.fn.dataTable.fileSave(
  95. new Blob( [ JSON.stringify( data ) ] ),
  96. 'Export.json'
  97. );
  98. }
  99. },
  100. {
  101. extend: 'print',
  102. exportOptions: {
  103. columns: ':visible'
  104. }
  105. }
  106. ]
  107. });
  108. /**************************************************
  109. * js of scroll horizontal & vertical *
  110. **************************************************/
  111. $('.scroll-horizontal-vertical').DataTable( {
  112. "scrollY": 200,
  113. "scrollX": true
  114. });
  115. });