"use strict";
// Class definition
var KTDefaultDatatableDemo = function () {
// Private functions
// basic demo
var demo = function () {
var datatable = $('#kt_datatable').KTDatatable({
data: {
type: 'remote',
source: {
read: {
url: HOST_URL + '/api/datatables/demos/default.php'
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
layout: {
scroll: true,
height: 550,
footer: false
},
sortable: true,
filterable: false,
pagination: true,
search: {
input: $('#kt_datatable_search_query')
},
rows: {
autoHide: false,
},
columns: [
{
field: 'RecordID',
title: '#',
sortable: false,
width: 20,
type: 'number',
selector: false,
textAlign: 'center',
}, {
field: 'OrderID',
title: 'Order ID',
}, {
field: 'Country',
title: 'Country',
template: function(row) {
return row.Country + ' ' + row.ShipCountry;
},
}, {
field: 'CompanyEmail',
title: 'Email',
width: 150,
}, {
field: 'ShipAddress',
title: 'Ship Address',
width: 200,
}, {
field: 'ShipDate',
title: 'Ship Date',
type: 'date',
format: 'MM/DD/YYYY',
}, {
field: 'CompanyName',
title: 'Company Name',
width: 200,
}, {
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: '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 () {
KTDefaultDatatableDemo.init();
});