New to Kendo UI for jQuery? Start a free 30-day trial

DataSource

configuration

Instance of kendo DataSource. See the kendo.data.DataSource.

This option is mandatory because the Pager is tightly connected with DataSource. The pager is UI widget for managing paging over the DataSource. The Pager gets values like page size or total count of items from DataSource.

dataSource

Object|kendo.data.DataSource

<div id="pager"></div>

<script>
    var dataSource = new kendo.data.DataSource({
        data: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
        ],
        pageSize: 2
    });

    $("#pager").kendoPager({
        dataSource: dataSource,
        pageSizes: [10, 25, 50]
    });

    dataSource.read();
</script>
<style>
    #pager {
      margin-top: 100px;
    }
</style>

If the Pager is used with another widget then we usually specify this Pager like object of options for given widget. In that case the DataSource is automatically injected to the Pager from the widget. See example for a Grid below.

<div id="grid"></div>

<script>
    $("#grid").kendoGrid({
      columns: [
        { field: "productName" },
        { field: "category" }
      ],
      dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageable: {
        // we don't set any DataSource here
        pageSize: 2,
        buttonCount: 1
      }
    });
</script>