'use strict';
// Class definition
var KTDatatableChildRemoteDataDemo = function() {
// Private functions
// demo initializer
var demo = function() {
var datatable = $('#kt_datatable').KTDatatable({
// datasource definition
data: {
type: 'remote',
source: {
read: {
url: HOST_URL + '/api/datatables/demos/customers.php',
},
},
pageSize: 10, // display 20 records per page
serverPaging: true,
serverFiltering: false,
serverSorting: true,
},
// layout definition
layout: {
scroll: false,
footer: false,
},
// column sorting
sortable: true,
pagination: true,
detail: {
title: 'Load sub table',
content: subTableInit,
},
search: {
input: $('#kt_datatable_search_query'),
key: 'generalSearch'
},
// columns definition
columns: [
{
field: 'RecordID',
title: '',
sortable: false,
width: 30,
textAlign: 'center',
}, {
field: 'checkbox',
title: '',
template: '{{RecordID}}',
sortable: false,
width: 20,
textAlign: 'center',
selector: {class: 'kt-checkbox--solid'},
}, {
field: 'FirstName',
title: 'First Name',
sortable: 'asc',
}, {
field: 'LastName',
title: 'Last Name',
}, {
field: 'Company',
title: 'Company',
}, {
field: 'Email',
title: 'Email',
}, {
field: 'Address',
title: 'Address',
}, {
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',
width: 125,
title: 'Actions',
sortable: false,
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();
function subTableInit(e) {
$('').attr('id', 'child_data_ajax_' + e.data.RecordID).appendTo(e.detailCell).KTDatatable({
data: {
type: 'remote',
source: {
read: {
url: HOST_URL + '/api/datatables/demos/orders.php',
params: {
// custom query params
query: {
generalSearch: '',
CustomerID: e.data.RecordID,
},
},
},
},
pageSize: 5,
serverPaging: true,
serverFiltering: false,
serverSorting: true,
},
// layout definition
layout: {
scroll: false,
footer: false,
// enable/disable datatable spinner.
spinner: {
type: 1,
theme: 'default',
},
},
sortable: true,
// columns definition
columns: [
{
field: 'RecordID',
title: '#',
sortable: false,
width: 30,
}, {
field: 'OrderID',
title: 'Order ID',
template: function(row) {
return '' + row.OrderID + ' - ' + row.ShipCountry + '';
},
}, {
field: 'ShipCountry',
title: 'Country',
width: 100
}, {
field: 'ShipAddress',
title: 'Ship Address',
}, {
field: 'ShipName',
title: 'Ship Name',
}, {
field: 'TotalPayment',
title: 'Payment',
type: 'number',
}, {
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 + '';
},
}],
});
}
};
return {
// Public functions
init: function() {
// init dmeo
demo();
},
};
}();
jQuery(document).ready(function() {
KTDatatableChildRemoteDataDemo.init();
});