Angular DataTable Responsive Extension not working for server side dataTable

Question

https://l-lin.github.io/angular-datatables/#/welcome i used this angular datatable extension for, but the responsive is not working for server side datatable. this my data table configuration

 this.dtOptions = {
      pagingType: "full_numbers",
      columnDefs: [{ orderable: false, targets: 0 }],
      pageLength: 10,
      serverSide: true,
      order:[[1,'asc']],
      processing:true,
      responsive: true,
      searchDelay:500,
      language:{
        processing:"<div style=color:#1b9b86;>Loading</div>"
      },
      ajax: (dataTablesParameters: any, callback) => {
        dataTablesParameters.order[0].column = this.getColumnName(
          dataTablesParameters.order[0].column
        );

        that.http
          .post<DataTablesResponse>(
            this.globals.url + "productservice/getallproducts",
            Object.assign(dataTablesParameters, this.data),
            {
              headers: this.header,
            }
          )
          .subscribe((resp: any) => {
            //console.log("Response",resp);
            //console.log("Date",resp.data);

            that.products = resp.data;
            
            
            //to load image
            for(let product of that.products){
              if(product.image_url != null){
                product.image_url = this.globals.url+product.image_url;
              }
            }

            
            timeout(10),
              callback({
                recordsTotal: resp.recordsTotal,
                recordsFiltered: resp.recordsFiltered,
                data: [],
              });
          });
      },
      
      columns: [
        // { data: "image_key",title:"" ,responsivePriority: 1},
        // { data: "name",title:"Product name",responsivePriority: 2},
        // { data: "description",title:"Description",responsivePriority: 3 },
        // { data: "price",title:"Price" ,responsivePriority: 4},
        // { data: "hsn_sac_code",title:"HSN code",responsivePriority: 5 },
        { data: "image_key"},
        { data: "name"},
        { data: "description" },
        { data: "price"},
        { data: "hsn_sac_code"}
      ]
    };

my version for angular datatable

"angular-datatables": "^10.0.0",
"datatables.net": "^1.10.22",
"datatables.net-dt": "^1.10.23",
"datatables.net-responsive": "^2.2.7",
"datatables.net-responsive-dt": "^2.2.7",

i am trying to implement https://l-lin.github.io/angular-datatables/#/extensions/responsive but its not working. have anyone done this previously i couldnt find any question for this issue.

Answer 1

It is very simple, you need to set callback data

   // that.products = resp.data; // remove this line



  callback({
                recordsTotal: resp.recordsTotal,
                recordsFiltered: resp.recordsFiltered,
                data: resp.data,   // insteal of []
                });