Grid Paging

jqxGrid component has a built-in paging capability that supports paging functionality. The paging functionality is enabled when the 'pageable' property is set to true. The code example below illustrates how to enable the paging functionality.

<JqxGrid @pagechanged="onPageChanged($event)" @pagesizechanged="onPageSizeChanged($event)"
:width="width" :source="source" :columns="columns"
:pageable="true">
</JqxGrid>

When a page is changed or the page size is changed, the Grid raises the pagechanged or pagesizechanged events.

methods: {
onPageChanged: function(event) {
let args = event.args;
let pagenumber = args.pagenum;
let pagesize = args.pagesize;
},
onPageSizeChanged: function (event) {
let args = event.args;
let pagenumber = args.pagenum;
let pagesize = args.pagesize;
}
}

Grid with Basic Paging

<template>
<JqxGrid ref="myGrid"
:width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true">
</JqxGrid>
</template>
<script>
import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
export default {
components: {
JqxGrid
},
data: function () {
return {
source: new jqx.dataAdapter(this.source),
columns: [
{ text: 'Contact Name', datafield: 'ContactName' },
{ text: 'Contact Title', datafield: 'Title' },
{ text: 'City', datafield: 'City' },
{ text: 'Country', datafield: 'Country' }
]
}
},
beforeCreate: function () {
this.source = {
localdata: [
['Alfreds Futterkiste', 'Maria Anders', 'Berlin', 'Germany'],
['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Mxico D.F.', 'Mexico'],
['Antonio Moreno Taquera', 'Antonio Moreno', 'Mxico D.F.', 'Mexico'],
['Around the Horn', 'Thomas Hardy', 'London', 'UK'],
['Berglunds snabbkp', 'Christina Berglund', 'Lule', 'Sweden'],
['Blauer See Delikatessen', 'Hanna Moos', 'Mannheim', 'Germany'],
['Blondesddsl pre et fils', 'Frdrique Citeaux', 'Strasbourg', 'France'],
['Blido Comidas preparadas', 'Martn Sommer', 'Madrid', 'Spain'],
['Bon app', 'Laurence Lebihan', 'Marseille', 'France'],
['Bottom-Dollar Markets', 'Elizabeth Lincoln', 'Tsawassen', 'Canada'],
['B`s Beverages', 'Victoria Ashworth', 'London', 'UK'],
['Cactus Comidas para llelet', 'Patricio Simpson', 'Buenos Aires', 'Argentina'],
['Centro comercial Moctezuma', 'Francisco Chang', 'Mxico D.F.', 'Mexico'],
['Chop-suey Chinese', 'Yang Wang', 'Bern', 'Switzerland'],
['Comrcio Mineiro', 'Pedro Afonso', 'Sao Paulo', 'Brazil'],
['Consolidated Holdings', 'Elizabeth Brown', 'London', 'UK'],
['Drachenblut Delikatessen', 'Sven Ottlieb', 'Aachen', 'Germany'],
['Du monde entier', 'Janine Labrune', 'Nantes', 'France'],
['Eastern Connection', 'Ann Devon', 'London', 'UK'],
['Ernst Handel', 'Roland Mendel', 'Graz', 'Austria']
],
datafields: [
{ name: 'ContactName', type: 'string', map: '0' },
{ name: 'Title', type: 'string', map: '1' },
{ name: 'City', type: 'string', map: '2' },
{ name: 'Country', type: 'string', map: '3' }
],
datatype: 'array'
};
}
}
</script>

The Grid Page Size options are displayed in a DropDownList component in the pager area. By default, the size options are 5, 10 and 20. The "pagesizeoptions" property enables you to set new size options.


The 'pagesize' property sets the default page size when the paging functionality is enabled. By default the Grid displays 10 rows in a page.

The 'pagerrenderer' property allows you to customize the UI of the Grid pager. In the sample below, we create a pagerrenderer function and inside the function, we build a DIV element with anchor tags. Each anchor tag has a page number as text. When the user clicks an anchor tag, the Grid calls the 'gotopage' function to navigate to a page. The 'pagerrenderer' function returns the DIV element as a result. This element is then internally appended to the Grid's pager area.

Grid with Custom Paging


To navigate to a page with the Grid API, use the 'gotopage' function.


The 'gotoprevpage' function navigates with 1 page before the current page.
The 'gotonextpage' function navigates with 1 page after the current page.
jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.