JAVASCRIPT   43

html-table.js

Guest on 13th October 2021 05:09:42 PM

  1. "use strict";
  2. // Class definition
  3.  
  4. var KTDatatableHtmlTableDemo = function() {
  5.     // Private functions
  6.  
  7.     // demo initializer
  8.     var demo = function() {
  9.  
  10.                 var datatable = $('#kt_datatable').KTDatatable({
  11.                         data: {
  12.                                 saveState: {cookie: false},
  13.                         },
  14.                         search: {
  15.                                 input: $('#kt_datatable_search_query'),
  16.                                 key: 'generalSearch'
  17.                         },
  18.                         columns: [
  19.                                 {
  20.                                         field: 'DepositPaid',
  21.                                         type: 'number',
  22.                                 },
  23.                                 {
  24.                                         field: 'OrderDate',
  25.                                         type: 'date',
  26.                                         format: 'YYYY-MM-DD',
  27.                                 }, {
  28.                                         field: 'Status',
  29.                                         title: 'Status',
  30.                                         autoHide: false,
  31.                                         // callback function support for column rendering
  32.                                         template: function(row) {
  33.                                                 var status = {
  34.                                                         1: {
  35.                                 'title': 'Pending',
  36.                                 'class': ' label-light-warning'
  37.                             },
  38.                                                         2: {
  39.                                 'title': 'Delivered',
  40.                                 'class': ' label-light-danger'
  41.                             },
  42.                                                         3: {
  43.                                 'title': 'Canceled',
  44.                                 'class': ' label-light-primary'
  45.                             },
  46.                                                         4: {
  47.                                 'title': 'Success',
  48.                                 'class': ' label-light-success'
  49.                             },
  50.                                                         5: {
  51.                                 'title': 'Info',
  52.                                 'class': ' label-light-info'
  53.                             },
  54.                                                         6: {
  55.                                 'title': 'Danger',
  56.                                 'class': ' label-light-danger'
  57.                             },
  58.                                                         7: {
  59.                                 'title': 'Warning',
  60.                                 'class': ' label-light-warning'
  61.                             }
  62.                                                 };
  63.                                                 return '<span class="label font-weight-bold label-lg' + status[row.Status].class + ' label-inline">' + status[row.Status].title + '</span>';
  64.                                         },
  65.                                 }, {
  66.                                         field: 'Type',
  67.                                         title: 'Type',
  68.                                         autoHide: false,
  69.                                         // callback function support for column rendering
  70.                                         template: function(row) {
  71.                                                 var status = {
  72.                                                         1: {
  73.                                 'title': 'Online',
  74.                                 'state': 'danger'
  75.                             },
  76.                                                         2: {
  77.                                 'title': 'Retail',
  78.                                 'state': 'primary'
  79.                             },
  80.                                                         3: {
  81.                                 'title': 'Direct',
  82.                                 'state': 'success'
  83.                             },
  84.                                                 };
  85.                                                 return '<span class="label label-' + status[row.Type].state + ' label-dot mr-2"></span><span class="font-weight-bold text-' +status[row.Type].state + '">' +    status[row.Type].title + '</span>';
  86.                                         },
  87.                                 },
  88.                         ],
  89.                 });
  90.  
  91.  
  92.  
  93.         $('#kt_datatable_search_status').on('change', function() {
  94.             datatable.search($(this).val().toLowerCase(), 'Status');
  95.         });
  96.  
  97.         $('#kt_datatable_search_type').on('change', function() {
  98.             datatable.search($(this).val().toLowerCase(), 'Type');
  99.         });
  100.  
  101.         $('#kt_datatable_search_status, #kt_datatable_search_type').selectpicker();
  102.  
  103.     };
  104.  
  105.     return {
  106.         // Public functions
  107.         init: function() {
  108.             // init dmeo
  109.             demo();
  110.         },
  111.     };
  112. }();
  113.  
  114. jQuery(document).ready(function() {
  115.         KTDatatableHtmlTableDemo.init();
  116. });

Raw Paste


Login or Register to edit or fork this paste. It's free.