Datatable - Paginator Pagination is enabled using paginator property and can be executed client side or server side. In lazy mode, totalRecords option should be provided as the logical number of records for paginator. Paginator can be customized using a template, see paginator widget for more information.
<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: 'rest/cars/list',
                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 = '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);
                }
            });
        }
    });
});