Angular 2 Jquery Datatables.net на стороне сервера не работает - PullRequest
0 голосов
/ 30 марта 2019

Когда данные возвращаются с сервера, они никогда не заносятся в таблицу.

"Я вижу результат обратного вызова« success », но таблица не заполняется, а« Обработка ... »также продолжает отображать"

Использование Angular 6, Jquery Datatables и Spring Rest Controller

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables@6.0.0 --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

Код HTML

<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>

Угловой код следующий

  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 выглядит следующим образом

@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 выглядит следующим образом:

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

}

Ожидаемый результат: таблица должна быть отображена Фактический результат: получение обработки сообщений Получение успешного ответа { "Рисовать": 1, "recordsTotal": 1, "recordsFiltered": 1, "данные": [{ "ID": NULL, "CustomerId": 111, "CustomerName": "ABC"}]} Но данные не заполняются

1 Ответ

0 голосов
/ 30 марта 2019

Установка плагинов jQuery и jQuery для вашего проекта Angular очень пагубна для вашего проекта.

Взгляните на мою таблицу Angular, извините, что у меня пока не было большого шанса документировать ее, но здесьэто пост и StackBlitz на нем.

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...