$(function() {
$('#tbllocal').puidatatable({
caption: 'Client Side Sorting',
paginator: {
rows: 10
},
columns: [
{field: 'vin', headerText: 'Vin', sortable: true},
{field: 'brand', headerText: 'Brand', sortable: true},
{field: 'year', headerText: 'Year', sortable: true},
{field: 'color', headerText: 'Color', sortable: true}
],
datasource: function(callback) {
$.ajax({
type: "GET",
url: 'rest/cars/list',
dataType: "json",
context: this,
success: function(response) {
callback.call(this, response);
}
});
}
});
$('#tblremote').puidatatable({
lazy: true,
caption: 'Server Side Sorting',
paginator: {
rows: 10,
totalRecords: 200
},
columns: [
{field: 'vin', headerText: 'Vin', sortable:true},
{field: 'brand', headerText: 'Brand', sortable:true},
{field: 'year', headerText: 'Year', sortable:true},
{field: 'color', headerText: 'Color', sortable:true}
],
datasource: function(callback, ui) {
var uri = 'rest/cars/lazylist/' + ui.first;
if (ui.sortField) {
uri += '/' + ui.sortField + '/' + ui.sortOrder;
}
$.ajax({
type: "GET",
url: uri,
dataType: "json",
context: this,
success: function(response) {
callback.call(this, response);
}
});
}
});
});