"use strict"; // Class definition var KTDatatableRemoteAjaxDemo = 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', // sample custom headers // headers: {'x-my-custom-header': 'some value', 'x-test-header': 'the value'}, map: function(raw) { // sample data mapping var dataSet = raw; if (typeof raw.data !== 'undefined') { dataSet = raw.data; } return dataSet; }, }, }, pageSize: 10, serverPaging: true, serverFiltering: true, serverSorting: true, }, // layout definition layout: { scroll: false, footer: false, }, // column sorting sortable: true, pagination: true, search: { input: $('#kt_datatable_search_query'), key: 'generalSearch' }, // columns definition columns: [{ field: 'RecordID', title: '#', sortable: 'asc', width: 30, type: 'number', selector: false, textAlign: 'center', }, { field: 'OrderID', title: 'Order ID', }, { field: 'Country', title: 'Country', template: function(row) { return row.Country + ' ' + row.ShipCountry; }, }, { field: 'ShipDate', title: 'Ship Date', type: 'date', format: 'MM/DD/YYYY', }, { field: 'CompanyName', title: 'Company Name', }, { field: 'Status', title: 'Status', // callback function support for column rendering template: function(row) { var status = { 1: { 'title': 'Pending', 'class': ' label-light-success' }, 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: 'Type', title: 'Type', autoHide: false, // callback function support for column rendering template: function(row) { var status = { 1: { 'title': 'Online', 'state': 'danger' }, 2: { 'title': 'Retail', 'state': 'primary' }, 3: { 'title': 'Direct', 'state': 'success' }, }; return '' + status[row.Type].title + ''; }, }, { field: 'Actions', title: 'Actions', sortable: false, width: 125, 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() { KTDatatableRemoteAjaxDemo.init(); });