Server Side Pagination in JqxDataTable

[gudboisgnParticipant]

How can we implement Server Side Pagination in Angular jqxDataTable,
My Server side Api made with laravel & Return total_pages, current_page, total_items, next_page, and items etc.

when next button is click call api with next page number and refresh table with next page items.

Please help me with it.
Thank You!

[HristoParticipant]

Hello gudboisgn,

Unfortunately, we do not have such example, yet.
You should in the source totalrecords field and to achieve this you could use downloadComplete callback of the DataAdapter.
Also, you could try to use beforeprocessing callback of the DataAdapter’s source.
I would like to suggest you look at these two demos below, they demonstrate the approach how to make server-side pagination:
https://mvcexamples.jqwidgets.com/widgets/datatable/light
https://jspexamples.jqwidgets.com/examples/datatable-sorting-paging-filtering.htm?light

If you need to send data to the server you could use formatData callback of the DataAdapter.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[gudboisgnParticipant]

Hello Hristo,
Thank you for help, and how can we format the data before rendering the data in grid.
example my server side api returns:

{
 data{
   items:[
     {name:'a', code:'546',...},
     {name:'b', code:'738',...},
     {name:'c', code:'893',...},
   ],
   per_page:20,
   to:20,
   total:1500,
   page:1
 },
 message: 'Data Reterieved'
}

data fields for the table column are within items of json.
i have set my root: 'data>items' , but it wont work.

And setting source.totalRecords gives following error :
Cannot read property 'totalRecords' of undefined

Here is my complete Code:

 this.source =
      {
          datatype: "json",
        //   localData: {},
          datafields: [
                { name: "id",  type: "string" },
                { name: "code", type: "string" },
                { name: "name", type: "int" },
            ],
          id: "id",
          root: "data>items",
          pagesize: 20,
          url: myUrl,
      }
    
      this.dataAdapter = new jqx.dataAdapter(this.source,{
        formatData: function(data) {
          data["page"] = data["pagenum"];
          data["limit"] = data["pagesize"];
          return data;
        },
        downloadComplete: function(data, status, xhr) {
            if (!this.source.totalRecords) {
                this.source.totalRecords = data.data.total; 
            }
        }
      });

      this.columns =
      [
          { text: "Id", datafield: "id", width: 50 },
          { text: "Code", datafield: "code", width: 120 },
          { text: "Name", datafield: "name", width: 120 }
      ];

[gudboisgnParticipant]

Hello Hristo,
Thank you for help, and how can we format the data before rendering the data in grid.
example my server side api returns:

{
 data{
   items:[
     {name:'a', code:'546',...},
     {name:'b', code:'738',...},
     {name:'c', code:'893',...},
   ],
   per_page:20,
   to:20,
   total:1500,
   page:1
 },
 message: 'Data Reterieved'
}

data fields for the table column are within items of json.
i have set my root: 'data>items' , but it wont work.

And setting source.totalrecords gives following error :
Cannot read property ‘totalrecords’ of undefined

Here is my complete Code:

 this.source =
      {
          datatype: "json",
        //   localData: {},
          datafields: [
                { name: "id",  type: "string" },
                { name: "code", type: "string" },
                { name: "name", type: "int" },
            ],
          id: "id",
          root: "data>items",
          pagesize: 20,
          url: myUrl,
      }
    
      this.dataAdapter = new jqx.dataAdapter(this.source,{
        formatData: function(data) {
          data["page"] = data["pagenum"];
          data["limit"] = data["pagesize"];
          return data;
        },
        downloadComplete: function(data, status, xhr) {
            if (!this.source.totalrecords) {
                this.source.totalrecords = data.data.total; 
            }
        }
      });

      this.columns =
      [
          { text: "Id", datafield: "id", width: 50 },
          { text: "Code", datafield: "code", width: 120 },
          { text: "Name", datafield: "name", width: 120 }
      ];

[HristoParticipant]

Hello gudboisgn,

I would suggest you try to replace your downloadComplete function with this arrow-function:

downloadComplete: (data, status, xhr) => { 
	if (!this.source.totalrecords) {
		this.source.totalrecords = data.data.total; 
	}
}

Also, it will be better to do this everywhere in this Angular project.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[gudboisgnParticipant]

Hello Hristo,
Thank You For your quick response& help.

[Author]

Posts