You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

708 lines
22 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. $(document).ready(function() {
  2. var table = $('#data_table').DataTable({
  3. responsive: true,
  4. select: true,
  5. 'aoColumnDefs': [{
  6. 'bSortable': false,
  7. 'aTargets': ['nosort']
  8. }]
  9. });
  10. $('#data_table tbody').on( 'click', 'tr', function() {
  11. if ( $(this).hasClass('selected') ) {
  12. $(this).removeClass('selected');
  13. }
  14. else {
  15. table.$('tr.selected').removeClass('selected');
  16. $(this).addClass('selected');
  17. }
  18. });
  19. // Plugin data table
  20. $.fn.dataTable.Api.register('column().data().sum()', function() {
  21. return this.reduce(function(a, b) {
  22. var x = parseFloat(a) || 0;
  23. var y = parseFloat(b) || 0;
  24. return x + y;
  25. });
  26. });
  27. /* Init the table and fire off a call to get the hidden nodes. */
  28. var table = $('#dt-plugin-method').DataTable();
  29. $('<button class="btn btn-primary m-b-20">sum of age in all rows</button>')
  30. .prependTo('.dt-plugin-buttons')
  31. .on('click', function() {
  32. alert('Column sum is: ' + table.column(3).data().sum());
  33. });
  34. $('<button class="btn btn-primary m-r-10 m-b-20">sum of age of visible rows</button>')
  35. .prependTo('.dt-plugin-buttons')
  36. .on('click', function() {
  37. alert('Column sum is: ' + table.column(3, { page: 'current' }).data().sum());
  38. });
  39. $.fn.dataTable.ext.type.detect.unshift(
  40. function(d) {
  41. return d === 'Low' || d === 'Medium' || d === 'High' ?
  42. 'salary-grade' :
  43. null;
  44. }
  45. );
  46. $.fn.dataTable.ext.type.order['salary-grade-pre'] = function(d) {
  47. switch (d) {
  48. case 'Low':
  49. return 1;
  50. case 'Medium':
  51. return 2;
  52. case 'High':
  53. return 3;
  54. }
  55. return 0;
  56. };
  57. $('#dt-ordering').DataTable();
  58. /* Custom filtering function which will search data in column four between two values */
  59. $.fn.dataTable.ext.search.push(
  60. function(settings, data, dataIndex) {
  61. var min = parseInt($('#min').val(), 10);
  62. var max = parseInt($('#max').val(), 10);
  63. var age = parseFloat(data[3]) || 0; // use data for the age column
  64. if ((isNaN(min) && isNaN(max)) ||
  65. (isNaN(min) && age <= max) ||
  66. (min <= age && isNaN(max)) ||
  67. (min <= age && age <= max)) {
  68. return true;
  69. }
  70. return false;
  71. }
  72. );
  73. var dtage = $('#dt-range').DataTable();
  74. // Event listener to the two range filtering inputs to redraw on input
  75. $('#min, #max').keyup(function() {
  76. dtage.draw();
  77. });
  78. /* Create an array with the values of all the input boxes in a column */
  79. $.fn.dataTable.ext.order['dom-text'] = function(settings, col) {
  80. return this.api().column(col, { order: 'index' }).nodes().map(function(td, i) {
  81. return $('input', td).val();
  82. });
  83. }
  84. /* Create an array with the values of all the input boxes in a column, parsed as numbers */
  85. $.fn.dataTable.ext.order['dom-text-numeric'] = function(settings, col) {
  86. return this.api().column(col, { order: 'index' }).nodes().map(function(td, i) {
  87. return $('input', td).val() * 1;
  88. });
  89. }
  90. /* Create an array with the values of all the select options in a column */
  91. $.fn.dataTable.ext.order['dom-select'] = function(settings, col) {
  92. return this.api().column(col, { order: 'index' }).nodes().map(function(td, i) {
  93. return $('select', td).val();
  94. });
  95. }
  96. /* Create an array with the values of all the checkboxes in a column */
  97. $.fn.dataTable.ext.order['dom-checkbox'] = function(settings, col) {
  98. return this.api().column(col, { order: 'index' }).nodes().map(function(td, i) {
  99. return $('input', td).prop('checked') ? '1' : '0';
  100. });
  101. }
  102. /* Initialise the table with the required column ordering data types */
  103. $(document).ready(function() {
  104. $('#dt-live-dom').DataTable({
  105. "columns": [
  106. null,
  107. { "orderDataType": "dom-text-numeric" },
  108. { "orderDataType": "dom-text", type: 'string' },
  109. { "orderDataType": "dom-select" }
  110. ]
  111. });
  112. });
  113. // Server side processing Data-table
  114. $('#dt-server-processing').DataTable({
  115. "processing": true,
  116. "serverSide": true,
  117. "ajax": "dt-json-data/scripts/server-processing.php",
  118. "columns": [
  119. { "data": "first_name" },
  120. { "data": "last_name" },
  121. { "data": "position" },
  122. { "data": "office" },
  123. { "data": "start_date" },
  124. { "data": "salary" }
  125. ]
  126. });
  127. $('#dt-http').DataTable({
  128. "processing": true,
  129. "serverSide": true,
  130. "ajax": {
  131. url: "dt-json-data/scripts/server-processing.php",
  132. data: function(d) {
  133. d.myKey = "myValue";
  134. // d.custom = $('#myInput').val();
  135. // etc
  136. }
  137. },
  138. "columns": [
  139. { "data": "first_name" },
  140. { "data": "last_name" },
  141. { "data": "position" },
  142. { "data": "office" },
  143. { "data": "start_date" },
  144. { "data": "salary" }
  145. ]
  146. });
  147. $('#dt-post').DataTable({
  148. "processing": true,
  149. "serverSide": true,
  150. "ajax": {
  151. url: "dt-json-data/scripts/post.php",
  152. type: "post"
  153. },
  154. "columns": [
  155. { "data": "first_name" },
  156. { "data": "last_name" },
  157. { "data": "position" },
  158. { "data": "office" },
  159. { "data": "start_date" },
  160. { "data": "salary" }
  161. ]
  162. });
  163. // Data-table ajax
  164. $('#dt-ajax-array').DataTable({
  165. "ajax": "dt-json-data/arrays.txt"
  166. });
  167. $('#dt-ajax-object').DataTable({
  168. "ajax": "dt-json-data/objects.txt",
  169. "columns": [
  170. { "data": "name" },
  171. { "data": "position" },
  172. { "data": "office" },
  173. { "data": "extn" },
  174. { "data": "start_date" },
  175. { "data": "salary" }
  176. ]
  177. });
  178. $('#dt-nested-object').DataTable({
  179. "processing": true,
  180. "ajax": "dt-json-data/objects_deep.txt",
  181. "columns": [
  182. { "data": "name" },
  183. { "data": "hr.position" },
  184. { "data": "contact.0" },
  185. { "data": "contact.1" },
  186. { "data": "hr.start_date" },
  187. { "data": "hr.salary" }
  188. ]
  189. });
  190. $('#dt-orthogonal').DataTable({
  191. ajax: "dt-json-data/orthogonal.txt",
  192. columns: [
  193. { data: "name" },
  194. { data: "position" },
  195. { data: "office" },
  196. { data: "extn" }, {
  197. data: {
  198. _: "start_date.display",
  199. sort: "start_date.timestamp"
  200. }
  201. },
  202. { data: "salary" }
  203. ]
  204. });
  205. var generatetable = $('#dt-generate-content').DataTable({
  206. "ajax": "dt-json-data/arrays.txt",
  207. "columnDefs": [{
  208. "targets": -1,
  209. "data": null,
  210. "defaultContent": "<button>Click!</button>"
  211. }]
  212. });
  213. $('#dt-generate-content tbody').on('click', 'button', function() {
  214. var data = generatetable.row($(this).parents('tr')).data();
  215. alert(data[0] + "'s salary is: " + data[5]);
  216. });
  217. $('#dt-render').DataTable({
  218. "ajax": "dt-json-data/arrays.txt",
  219. "deferRender": true
  220. });
  221. // Data source table js start
  222. $('#dom-table').DataTable();
  223. $('#ajax-table').DataTable({
  224. "ajax": 'dt-json-data/ajax-table.json'
  225. });
  226. // Jsource table start
  227. var dataSet = [
  228. ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
  229. ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
  230. ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
  231. ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
  232. ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  233. ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
  234. ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
  235. ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"],
  236. ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"],
  237. ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600"],
  238. ["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560"],
  239. ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000"],
  240. ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600"],
  241. ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500"],
  242. ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750"],
  243. ["Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500"],
  244. ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000"],
  245. ["Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500"],
  246. ["Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000"],
  247. ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500"],
  248. ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000"],
  249. ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000"],
  250. ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450"],
  251. ["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600"],
  252. ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
  253. ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
  254. ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
  255. ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
  256. ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
  257. ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
  258. ["Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400"],
  259. ["Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500"],
  260. ["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000"],
  261. ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"],
  262. ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
  263. ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
  264. ];
  265. $('#jsource-table').DataTable({
  266. data: dataSet,
  267. columns: [
  268. { title: "Name" },
  269. { title: "Position" },
  270. { title: "Office" },
  271. { title: "Extn." },
  272. { title: "Start date" },
  273. { title: "Salary" }
  274. ]
  275. });
  276. // Jsource table end
  277. // Server side script table start
  278. $('#server-table').DataTable({
  279. "processing": true,
  280. "serverSide": true,
  281. "ajax": "dt-json-data/server-table.php"
  282. });
  283. // Server side script table end
  284. // Data source table js end
  285. // Api table js start
  286. var t = $('#add-row-table').DataTable();
  287. var counter = 1;
  288. $('#addRow').on('click', function() {
  289. t.row.add([
  290. counter + '.1',
  291. counter + '.2',
  292. counter + '.3',
  293. counter + '.4',
  294. counter + '.5'
  295. ]).draw(false);
  296. counter++;
  297. });
  298. // Automatically add a first row of data
  299. $('#addRow').click();
  300. // Setup - add a text input to each footer cell
  301. $('#footer-search tfoot th').each(function() {
  302. var title = $(this).text();
  303. $(this).html('<input type="text" class="form-control" placeholder="Search ' + title + '" />');
  304. });
  305. // DataTable
  306. var table = $('#footer-search').DataTable();
  307. // Apply the search
  308. table.columns().every(function() {
  309. var that = this;
  310. $('input', this.footer()).on('keyup change', function() {
  311. if (that.search() !== this.value) {
  312. that
  313. .search(this.value)
  314. .draw();
  315. }
  316. });
  317. });
  318. $('#footer-select').DataTable({
  319. initComplete: function() {
  320. this.api().columns().every(function() {
  321. var column = this;
  322. var select = $('<select class="form-control form-control-sm"><option value=""></option></select>')
  323. .appendTo($(column.footer()).empty())
  324. .on('change', function() {
  325. var val = $.fn.dataTable.util.escapeRegex(
  326. $(this).val()
  327. );
  328. column
  329. .search(val ? '^' + val + '$' : '', true, false)
  330. .draw();
  331. });
  332. column.data().unique().sort().each(function(d, j) {
  333. select.append('<option value="' + d + '">' + d + '</option>')
  334. });
  335. });
  336. }
  337. });
  338. // Add Rows start
  339. var srow = $('#row-select').DataTable();
  340. $('#row-select tbody').on('click', 'tr', function() {
  341. $(this).toggleClass('selected');
  342. });
  343. $('#row-select-btn').on('click',function() {
  344. alert(srow.rows('.selected').data().length + ' row(s) selected');
  345. });
  346. // Add Rows end
  347. // Delete rows start
  348. var drow = $('#row-delete').DataTable();
  349. $('#row-delete tbody').on('click', 'tr', function() {
  350. if ($(this).hasClass('selected')) {
  351. $(this).removeClass('selected');
  352. } else {
  353. drow.$('tr.selected').removeClass('selected');
  354. $(this).addClass('selected');
  355. }
  356. });
  357. $('#row-delete-btn').on('click',function() {
  358. drow.row('.selected').remove().draw(!1);
  359. });
  360. // Delete rows end
  361. // /* Formatting function for row details - modify as you need */
  362. function format(d) {
  363. // `d` is the original data object for the row
  364. return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
  365. '<tr>' +
  366. '<td>Full name:</td>' +
  367. '<td>' + d.name + '</td>' +
  368. '</tr>' +
  369. '<tr>' +
  370. '<td>Extension number:</td>' +
  371. '<td>' + d.extn + '</td>' +
  372. '</tr>' +
  373. '<tr>' +
  374. '<td>Extra info:</td>' +
  375. '<td>And any further details here (images etc)...</td>' +
  376. '</tr>' +
  377. '</table>';
  378. }
  379. var ct = $('#child-table').DataTable({
  380. "ajax": "dt-json-data/ajax-child-rows.json",
  381. "columns": [{
  382. "className": 'details-control',
  383. "orderable": false,
  384. "data": null,
  385. "defaultContent": ''
  386. },
  387. { "data": "name" },
  388. { "data": "position" },
  389. { "data": "office" },
  390. { "data": "salary" }
  391. ],
  392. "order": [
  393. [1, 'asc']
  394. ]
  395. });
  396. // Add event listener for opening and closing details
  397. $('#child-table tbody').on('click', 'td.details-control', function() {
  398. var tr = $(this).closest('tr');
  399. var row = ct.row(tr);
  400. if (row.child.isShown()) {
  401. // This row is already open - close it
  402. row.child.hide();
  403. tr.removeClass('shown');
  404. } else {
  405. // Open this row
  406. row.child(format(row.data())).show();
  407. tr.addClass('shown');
  408. }
  409. });
  410. // Form input start
  411. var table = $('#form-input-table').DataTable();
  412. $('#form-input-btn').on('click',function() {
  413. var data = table.$('input, select').serialize();
  414. alert(
  415. "The following data would have been submitted to the server: \n\n" +
  416. data.substr(0, 120) + '...'
  417. );
  418. return false;
  419. });
  420. // Form input end
  421. // Show-hide table js start
  422. var sh = $('#show-hide-table').DataTable({
  423. "scrollY": "200px",
  424. "paging": false
  425. });
  426. $('a.toggle-vis').on('click', function(e) {
  427. e.preventDefault();
  428. // Get the column API object
  429. var column = sh.column($(this).attr('data-column'));
  430. // Toggle the visibility
  431. column.visible(!column.visible());
  432. });
  433. // Show-hide table js end
  434. // Search API start
  435. function filterGlobal() {
  436. $('#search-api').DataTable().search(
  437. $('#global_filter').val(),
  438. $('#global_regex').prop('checked'),
  439. $('#global_smart').prop('checked')
  440. ).draw();
  441. }
  442. function filterColumn(i) {
  443. $('#search-api').DataTable().column(i).search(
  444. $('#col' + i + '_filter').val(),
  445. $('#col' + i + '_regex').prop('checked'),
  446. $('#col' + i + '_smart').prop('checked')
  447. ).draw();
  448. }
  449. $('#search-api').DataTable();
  450. $('input.global_filter').on('keyup click', function() {
  451. filterGlobal();
  452. });
  453. $('input.column_filter').on('keyup click', function() {
  454. filterColumn($(this).parents('tr').attr('data-column'));
  455. });
  456. // Search API end
  457. // Api table js end
  458. // Styling js start
  459. $('#base-style').DataTable();
  460. $('#no-style').DataTable();
  461. $('#compact').DataTable();
  462. $('#table-style-hover').DataTable();
  463. // Styling js end
  464. $('#simpletable').DataTable();
  465. $('#order-table').DataTable({
  466. "order": [
  467. [3, "desc"]
  468. ]
  469. });
  470. $('#multi-colum-dt').DataTable({
  471. columnDefs: [{
  472. targets: [0],
  473. orderData: [0, 1]
  474. }, {
  475. targets: [1],
  476. orderData: [1, 0]
  477. }, {
  478. targets: [4],
  479. orderData: [4, 0]
  480. }]
  481. });
  482. $('#complex-dt').DataTable();
  483. $('#DOM-dt').DataTable({
  484. "dom": '<"top"i>rt<"bottom"flp><"clear">'
  485. });
  486. $('#alt-pg-dt').DataTable({
  487. "pagingType": "full_numbers"
  488. });
  489. $('#scr-vrt-dt').DataTable({
  490. "scrollY": "200px",
  491. "scrollCollapse": true,
  492. "paging": false
  493. });
  494. $('#scr-vtr-dynamic').DataTable({
  495. scrollY: '50vh',
  496. scrollCollapse: true,
  497. paging: false
  498. });
  499. $('#lang-dt').DataTable({
  500. "language": {
  501. "decimal": ",",
  502. "thousands": "."
  503. }
  504. });
  505. var table = $('#dom-jqry').DataTable();
  506. $('#dom-jqry tbody').on('click', 'tr', function() {
  507. var data = table.row(this).data();
  508. alert('You clicked on ' + data[0] + '\'s row');
  509. });
  510. $('#colum-rendr').DataTable({
  511. "columnDefs": [{
  512. // The `data` parameter refers to the data for the cell (defined by the
  513. // `data` option, which defaults to the column being worked with, in
  514. // this case `data: 0`.
  515. "render": function(data, type, row) {
  516. return data + ' (' + row[3] + ')';
  517. },
  518. "targets": 0
  519. },
  520. { "visible": false, "targets": [3] }
  521. ]
  522. });
  523. $('#multi-table').DataTable({
  524. "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
  525. });
  526. $('#complex-header').DataTable({
  527. "columnDefs": [{
  528. "visible": false,
  529. "targets": -1
  530. }]
  531. });
  532. $('#lang-file').DataTable({
  533. "language": {
  534. "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
  535. }
  536. });
  537. $.extend(true, $.fn.dataTable.defaults, {
  538. "searching": false,
  539. "ordering": false
  540. });
  541. $('#setting-default').DataTable();
  542. var table = $('#row-grouping').DataTable({
  543. "columnDefs": [
  544. { "visible": false, "targets": 2 }
  545. ],
  546. "order": [
  547. [2, 'asc']
  548. ],
  549. "displayLength": 25,
  550. "drawCallback": function(settings) {
  551. var api = this.api();
  552. var rows = api.rows({ page: 'current' }).nodes();
  553. var last = null;
  554. api.column(2, { page: 'current' }).data().each(function(group, i) {
  555. if (last !== group) {
  556. $(rows).eq(i).before(
  557. '<tr class="group"><td colspan="5">' + group + '</td></tr>'
  558. );
  559. last = group;
  560. }
  561. });
  562. }
  563. });
  564. // Order by the grouping
  565. $('#row-grouping tbody').on('click', 'tr.group', function() {
  566. var currentOrder = table.order()[0];
  567. if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
  568. table.order([2, 'desc']).draw();
  569. } else {
  570. table.order([2, 'asc']).draw();
  571. }
  572. });
  573. $('#footer-callback').DataTable({
  574. "footerCallback": function(row, data, start, end, display) {
  575. var api = this.api(),
  576. data;
  577. // Remove the formatting to get integer data for summation
  578. var intVal = function(i) {
  579. return typeof i === 'string' ?
  580. i.replace(/[\$,]/g, '') * 1 :
  581. typeof i === 'number' ?
  582. i : 0;
  583. };
  584. // Total over all pages
  585. total = api
  586. .column(4)
  587. .data()
  588. .reduce(function(a, b) {
  589. return intVal(a) + intVal(b);
  590. }, 0);
  591. // Total over this page
  592. pageTotal = api
  593. .column(4, { page: 'current' })
  594. .data()
  595. .reduce(function(a, b) {
  596. return intVal(a) + intVal(b);
  597. }, 0);
  598. // Update footer
  599. $(api.column(4).footer()).html(
  600. '$' + pageTotal + ' ( $' + total + ' total)'
  601. );
  602. }
  603. });
  604. $('#custm-tool-ele').DataTable({
  605. "dom": '<"toolbar">frtip'
  606. });
  607. $("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
  608. $('#row-callback').DataTable({
  609. "createdRow": function(row, data, index) {
  610. if (data[5].replace(/[\$,]/g, '') * 1 > 150000) {
  611. $('td', row).eq(5).addClass('highlight');
  612. }
  613. }
  614. });
  615. });