jQuery UI Widgets Forums Angular Server Side Pagination in JqxDataTable

This topic contains 5 replies, has 2 voices, and was last updated by  gudboisgn 2 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Server Side Pagination in JqxDataTable #96983

    gudboisgn
    Participant

    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!

    • This topic was modified 2 years, 8 months ago by  gudboisgn.
    Server Side Pagination in JqxDataTable #97026

    Hristo
    Participant

    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

    Server Side Pagination in JqxDataTable #97038

    gudboisgn
    Participant

    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 }
          ];
    • This reply was modified 2 years, 8 months ago by  gudboisgn.
    • This reply was modified 2 years, 8 months ago by  gudboisgn.
    • This reply was modified 2 years, 8 months ago by  gudboisgn.
    Server Side Pagination in JqxDataTable #97042

    gudboisgn
    Participant

    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 }
          ];
    Server Side Pagination in JqxDataTable #97044

    Hristo
    Participant

    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

    Server Side Pagination in JqxDataTable #97045

    gudboisgn
    Participant

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.