"use strict"; // Class definition var KTAppsProjectsListDatatable = 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, 10); var img = number + '.png'; var skills = [ 'Angular, React', 'Vue, Kendo', '.NET, Oracle, MySQL', 'Node, SASS, Webpack', 'MangoDB, Java', 'HTML5, jQuery, CSS3', 'React, Vue', 'MangoDB, Node.js' ]; var output = ''; if (number < 7) { output = '
\
\ photo\
\
\
' + data.CompanyAgent + '
\ ' + skills[number -1] + '\
\
'; } 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 + '
\ ' + skills[number - 4] + '\
\
'; } 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 '\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ '; }, }] }); }; return { // public functions init: function() { _demo(); }, }; }(); jQuery(document).ready(function() { KTAppsProjectsListDatatable.init(); });