"use strict"; // Class definition var KTAppsUsersListDatatable = function() { // Private functions // basic demo var _demo = function() { var datatable = $('#kt_datatable').KTDatatable({ // datasource definition data: { type: 'remote', source: { read: { url: HOST_URL + '/api/datatables/demos/default.php', }, }, pageSize: 10, // display 20 records per page serverPaging: true, serverFiltering: true, serverSorting: true, }, // layout definition layout: { scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed. footer: false, // display/hide footer }, // column sorting sortable: true, pagination: true, search: { input: $('#kt_subheader_search_form'), delay: 400, key: 'generalSearch' }, // columns definition columns: [ { field: 'RecordID', title: '#', sortable: 'asc', width: 40, type: 'number', selector: false, textAlign: 'left', template: function(data) { return '' + data.RecordID + ''; } }, { field: 'OrderID', title: 'Customer', width: 250, template: function(data) { var number = KTUtil.getRandomInt(1, 14); var user_img = '100_' + number + '.jpg'; var output = ''; if (number > 8) { output = '
\
\ photo\
\
\
' + data.CompanyAgent + '
\ ' + data.CompanyEmail + '\
\
'; } else { var stateNo = KTUtil.getRandomInt(0, 7); var states = [ 'success', 'primary', 'danger', 'success', 'warning', 'dark', 'primary', 'info']; var state = states[stateNo]; output = '
\
\ ' + data.CompanyAgent.substring(0, 1) + '\
\
\
' + data.CompanyAgent + '
\ ' + data.CompanyEmail + '\
\
'; } return output; } }, { field: 'Country', title: 'Country', template: function(row) { var output = ''; output += '
' + row.Country + '
'; output += '
Code: ' + row.ShipCountry + '
'; return output; } }, { field: 'ShipDate', title: 'Ship Date', type: 'date', format: 'MM/DD/YYYY', template: function(row) { var output = ''; var status = { 1: {'title': 'Paid', 'class': ' label-light-primary'}, 2: {'title': 'Approved', 'class': ' label-light-danger'}, 3: {'title': 'Pending', 'class': ' label-light-primary'}, 4: {'title': 'Rejected', 'class': ' label-light-success'} }; var index = KTUtil.getRandomInt(1, 4); output += '
' + row.ShipDate + '
'; output += '
' + status[index].title + '
'; return output; }, }, { field: 'CompanyName', title: 'Company Name', template: function(row) { var output = ''; output += '
' + row.CompanyName + '
'; return output; } }, { field: 'Status', title: 'Status', // callback function support for column rendering template: function(row) { var status = { 1: {'title': 'Pending', 'class': ' label-light-primary'}, 2: {'title': 'Delivered', 'class': ' label-light-danger'}, 3: {'title': 'Canceled', 'class': ' label-light-primary'}, 4: {'title': 'Success', 'class': ' label-light-success'}, 5: {'title': 'Info', 'class': ' label-light-info'}, 6: {'title': 'Danger', 'class': ' label-light-danger'}, 7: {'title': 'Warning', 'class': ' label-light-warning'}, }; return '' + status[row.Status].title + ''; }, }, { field: 'Actions', title: 'Actions', sortable: false, width: 130, overflow: 'visible', autoHide: false, template: function() { return '\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ '; }, }], }); $('#kt_datatable_search_status').on('change', function() { datatable.search($(this).val().toLowerCase(), 'Status'); }); $('#kt_datatable_search_type').on('change', function() { datatable.search($(this).val().toLowerCase(), 'Type'); }); $('#kt_datatable_search_status, #kt_datatable_search_type').selectpicker(); }; return { // public functions init: function() { _demo(); }, }; }(); jQuery(document).ready(function() { KTAppsUsersListDatatable.init(); });