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

Types

The Pager has two types:

  • numeric
  • input

The Pager is numeric by default. To configure the number of buttons that will be shown in a numeric pager, use the buttonCount option. To configure the pager to accept only use input, set the numeric to false and the input to true.

The following example shows how to enable the input pager type

        <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,
              input: true,
              numeric: false
            });

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

Settings

The following settings enable you to determine which built-in pager elements will be rendered:

  • pageSizes - renders the dropdown that allows the user to change the page size.
  • refresh - renders a refresh button
  • previousNext - toggles the visibility of buttons for navigating to the first, last, previous and next pages
  • info - toggles the visibility of the current pager information

See Also

In this article