Vue UI Components Documentation

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. 

<JqxGrid :width="width" :source="source" :columns="columns"
         :pageable="true" :pagesizeoptions="['10', '20', '30']">
</JqxGrid>

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 

<template>
    <JqxGrid ref="myGrid"
             :width="850" :source="source" :columns="columns" :autoheight="true"
             :pageable="true" :pagerrenderer="pagerrenderer">
    </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'
            };
        },
        methods: {
            pagerrenderer: function () {
                let element = $("<div style='margin-top: 5px; width: 100%; height: 100%;'></div>");
                let paginginfo = this.$refs.myGrid.getpaginginformation();
                for (i = 0; i < paginginfo.pagescount; i++) {
                    // add anchor tag with the page number for each page.
                    let anchor = $("<a style='padding: 5px;' href='#" + i + "'>" + i + "</a>");
                    anchor.appendTo(element);
                    anchor.click((event) => {
                        // go to a page.
                        let pagenum = parseInt($(event.target).text());
                        this.$refs.myGrid.gotopage(pagenum);
                    });
                }
                return element;
            }
        }
    }
</script>

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

this.$refs.myGrid.gotopage(1);

The 'gotoprevpage' function navigates with 1 page before the current page.
The 'gotonextpage' function navigates with 1 page after the current page.