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

Pageable

configuration

If set to true the ListView will display a pager. By default paging is disabled.

Can be set to a JavaScript object which represents the pager configuration.

Don't forget to set a pageSize, no matter if paging is performed client-side or server-side. A pageSize can be defined in the pageable settings, or in the dataSource settings. If an already existing datasource instance is passed to the ListView, then the pagesize option should be set in the dataSource's settings and not in the pageable settings.

pageable

Boolean|Object

Default: false

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products"
            }
          },
          pageSize: 10
        });

    var listView = $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: true
    }).data("kendoListView");
  });
</script>

pageable.adaptiveMode

String

Specifies a value whether the page sizes dropdown will be adaptive. Possible values are:

none - The current page.
auto - The total number of pages.

Default: "none"

<div id="listview"></div>
<div id="pager"></div>
<script>
var dataSource = new kendo.data.DataSource({
    data: [
        { name: "Item 1" },
        { name: "Item 2" },
        { name: "Item 3" },
        { name: "Item 4" },
        { name: "Item 5" }
    ],
    pageSize: 2
});

$("#listview").kendoListView({
    dataSource: dataSource,
    template: "<div class='k-listview-item'>#: name #</div>",
    pageable: {
        adaptiveMode: "auto",
        pageSizes: [2, 5, 10]
    }
});
</script>

pageable.buttonCount

Number

The maximum number of buttons displayed in the numeric pager. The pager will display ellipsis (...) if there are more pages than the specified number.

Default: 10

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products"
            }
          },
          pageSize: 10
        });

    var listView = $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        buttonCount: 10
      }
    }).data("kendoListView");
  });
</script>

pageable.info

Boolean

If set to true the pager will display information about the current page and total number of data items. By default the paging information is displayed.

Default: true

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products"
            }
          },
          pageSize: 10
        });

    var listView = $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        info: false
      }
    }).data("kendoListView");
  });
</script>

pageable.input

Boolean

If set to true the pager will display an input element which allows the user to type a specific page number. By default the page input is not displayed.

Using pageable.input and pageable.numeric at the same time is not recommended.

Default: false

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products"
            }
          },
          pageSize: 10
        });

    var listView = $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        input: true
      }
    }).data("kendoListView");
  });
</script>

pageable.messages

Object

The text messages displayed in pager. Use this option to customize or localize the pager messages.

<div id="listview"></div>
<div id="pager"></div>
<script>
var dataSource = new kendo.data.DataSource({
    data: [
        { name: "Item 1" },
        { name: "Item 2" },
        { name: "Item 3" },
        { name: "Item 4" },
        { name: "Item 5" }
    ],
    pageSize: 2
});

$("#listview").kendoListView({
    dataSource: dataSource,
    template: "<div class='k-listview-item'>#: name #</div>",
    pageable: {
        messages: {
            display: "Showing {0} to {1} of {2} entries",
            empty: "No records to display",
            page: "Page",
            of: "of {0}",
            itemsPerPage: "entries per page",
            first: "Go to first page",
            previous: "Go to previous page",
            next: "Go to next page",
            last: "Go to last page"
        }
    }
});
</script>

pageable.numeric

Boolean

If set to true the pager will display buttons for navigating to specific pages. By default those buttons are displayed.

Using pageable.numeric and pageable.input at the same time is not recommended.

Default: true

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 1
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      navigatable: true,
      pageable: {
        numeric: false
      }
    });
  });
</script>

pageable.pageSize

Number

The number of data items which will be displayed in the ListView. This setting will not work if the ListView is assigned an already existing Kendo UI DataSource instance.

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $("#listView").kendoListView({
    dataSource: {
      data: [
        { ProductName: "Tea", ProductID: 1 },
        { ProductName: "Coffee", ProductID: 2 },
        { ProductName: "Ham", ProductID: 3 },
        { ProductName: "Bread", ProductID: 4 }
      ]
    },
    template: kendo.template($("#template").html()),
    navigatable: true,
    pageable: {
      pageSize: 2,
    }
  })
</script>

pageable.pageSizes

Boolean|Array

If set to true the pager will display a drop-down which allows the user to pick a page size.

Can be set to an array of predefined page sizes to override the default list. A special all value is supported. It sets the page size to the total number of records.

If a pageSize setting is provided for the data source then this value will be selected initially.

Default: false

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 1
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      pageable: {
        pageSizes: true
      }
    });
  });
</script>

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: "https://demos.telerik.com/service/v2/core/Products"
            }
          },
          pageSize: 2
        });

    $("#listView").kendoListView({
      dataSource: dataSource,
      template: kendo.template($("#template").html()),
      pageable: {
        pageSizes: [2, 3, 4, "all"],
        numeric: false
      }
    });
  });
</script>

pageable.position

String

Specifies the position in which the ListView pager will be rendered. Valid values are "top" and "bottom" (default).

Default: "bottom"

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $("#listView").kendoListView({
    dataSource: {
      data: [
        { ProductName: "Tea", ProductID: 1 },
        { ProductName: "Coffee", ProductID: 2 },
        { ProductName: "Ham", ProductID: 3 },
        { ProductName: "Bread", ProductID: 4 }
      ]
    },
    template: kendo.template($("#template").html()),
    navigatable: true,
    pageable: {
      pageSize: 2,
      position: "top"
    }
  })
</script>

pageable.previousNext

Boolean

If set to true the Pager will display buttons for going to the first, previous, next and last pages.

Default: true

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $("#listView").kendoListView({
    dataSource: {
      data: [
        { ProductName: "Tea", ProductID: 1 },
        { ProductName: "Coffee", ProductID: 2 },
        { ProductName: "Ham", ProductID: 3 },
        { ProductName: "Bread", ProductID: 4 }
      ]
    },
    template: kendo.template($("#template").html()),
    navigatable: true,
    pageable: {
      pageSize: 2,
      previousNext: false
    }
  })
</script>

pageable.refresh

Boolean

If set to true the pager will display the refresh button. Clicking the refresh button will refresh the ListView.

Default: false

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $("#listView").kendoListView({
    dataSource: {
      data: [
        { ProductName: "Tea", ProductID: 1 },
        { ProductName: "Coffee", ProductID: 2 },
        { ProductName: "Ham", ProductID: 3 },
        { ProductName: "Bread", ProductID: 4 }
      ]
    },
    template: kendo.template($("#template").html()),
    navigatable: true,
    pageable: {
      pageSize: 2,
      refresh: true
    }
  })
</script>

pageable.responsive

Boolean

If set to false the pager will not be responsive.

Default: true

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
  <div class="product-view k-widget">
      <dl>
          <dt>Product Name</dt>
          <dd>#:ProductName#</dd>
      </dl>
  </div>
</script>

<script>
  $("#listView").kendoListView({
    dataSource: {
      data: [
        { ProductName: "Tea", ProductID: 1 },
        { ProductName: "Coffee", ProductID: 2 },
        { ProductName: "Ham", ProductID: 3 },
        { ProductName: "Bread", ProductID: 4 }
      ]
    },
    template: kendo.template($("#template").html()),
    navigatable: true,
    pageable: {
      pageSize: 2,
      responsive: false
    }
  })
</script>

Related Members