CODEWITHSUNDEEP
javajqueryangulardatatables
Aaruhi
Aaruhi

Reputation: 87

Angular 2 Jquery Datatables.net server side not working

When the data returns back from the server, it's never populated into the table.

"I can see the result from the 'success' callback, but the table does not get populated, and the 'Processing...' also continues to display"

Using Angular 6 , Jquery Datatables , and Spring Rest Controller 

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install [email protected] --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

Html Code 

<table id=paymentHistoryTable datatable [dtOptions]="dtOptions class="table table-striped table-bordered" >
            <thead>
              <tr>
  <th width="10%">Account ID</th>
                <th width="12%">Name</th>
   </tr>
            </thead>
            <tbody>
            </tbody>
          </table>

Angular code is as following

  getPaymentHistoryPagination() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      serverSide: true,
      processing: true,
       ajax: {
    url: this.baseUrl + '/getPaymentHistoryPagination',
    type: 'POST',
    contentType: 'application/json; charset=UTF-8',
    error: function(xhr, error, code) { console.log("error::" +error); },
    success: function(result) {console.log(JSON.stringify(result))},
    data: function(data) {
        return JSON.stringify(data);
    }
}, columns: [
      { data: "customerId", title: 'Departure Time'},
      { data: "customerName", title: 'Customer Name'}
    ]
  };

  }

Java Controller is as following

@RequestMapping(value = "/getPaymentHistoryPagination", method = RequestMethod.POST)
@ResponseBody
public DataTableResponse getPaymentHistoryPagination1(@RequestBody @Valid SearchPropertyParamDTO dto) {
    DataTableResponse dataTableResponse = new DataTableResponse();
try {
dataTableResponse.setDraw(1);
dataTableResponse.setRecordsFiltered(1L); //One record for testing
dataTableResponse.setRecordsTotal(1L);
  Invoice invoice = new Invoice();
        invoice.setCustomerId(111L);
        invoice.setCustomerName("Abc");

        List invoices = new ArrayList();
        invoices.add(invoice);
        dataTableResponse.setData(invoices);
    } catch (Exception ex) {
        //LOG.error("Error in getAllProperty", ex);
    }
    return dataTableResponse;
}

DataTableResponse is as following :

public class DataTableResponse {
private int draw =1;
private long recordsTotal ;
private long recordsFiltered ;
   private List data;

}

Expected Result : Table should be rendered Actual Result : Getting Message Processing Getting success response {"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[{"id":null,"customerId":111,"customerName":"Abc"}]} But no data is populated

Upvotes: 0

Views: 490

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21658

Installing jQuery and jQuery plugins to your Angular project is highly detrimental to your project.

Take a look at my Angular table, sorry that I have not had much of a chance to document it much yet but here is a post and a StackBlitz on it.

https://www.reddit.com/r/Angular2/comments/b76924/easy_angular_table/

https://stackblitz.com/edit/angular-npn1p1?file=src%2Fapp%2Fapp.component.html

Upvotes: 0

Related Questions