<div id="tbllocal"></div>

<div id="tblremoteeager"></div>

<div id="tblremotelazy"></div>
                                

$(function() {
    var localData = [
        {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
        {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
        {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
        {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
        {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
        {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
        {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
        {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
        {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
        {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
    ];

    $('#tbllocal').puidatatable({
        caption: 'Client Side Pagination with Local Data',
        paginator: {
            rows: 5
        },
        columns: [
            {field: 'vin', headerText: 'Vin'},
            {field: 'brand', headerText: 'Brand'},
            {field: 'year', headerText: 'Year'},
            {field: 'color', headerText: 'Color'}
        ],
        datasource: localData
    });

    $('#tblremoteeager').puidatatable({
        caption: 'Client Side Pagination with Remote Data',
        paginator: {
            rows: 10
        },
        columns: [
            {field: 'vin', headerText: 'Vin'},
            {field: 'brand', headerText: 'Brand'},
            {field: 'year', headerText: 'Year'},
            {field: 'color', headerText: 'Color'}
        ],
        datasource: function(callback) {
            $.ajax({
                type: "GET",
                url: 'showcase/resources/data/cars-medium.json',
                dataType: "json",
                context: this,
                success: function(response) {
                    callback.call(this, response);
                }
            });
        }
    });

    $('#tblremotelazy').puidatatable({
        lazy: true,
        caption: 'Server Side Pagination with Remote Data',
        paginator: {
            rows: 10,
            totalRecords: 200
        },
        columns: [
            {field: 'vin', headerText: 'Vin'},
            {field: 'brand', headerText: 'Brand'},
            {field: 'year', headerText: 'Year'},
            {field: 'color', headerText: 'Color'}
        ],
        datasource: function(callback, ui) {
            var uri = 'showcase/resources/data/cars-large.json';
            if (ui.sortField) {
                uri += '/' + ui.sortField + '/' + ui.sortOrder;
            }

            $.ajax({
                type: "GET",
                url: uri,
                dataType: "json",
                context: this,
                success: function(response) {
                    //imitate lazy loading by slicing a new list from whole data, in real application the response should actually contain just the new chunk
                    callback.call(this, response.slice(ui.first, ui.first + 10));
                }
            });
        }
    });
});