Блог

Я попытался добавить jquery datatable в react с обработкой на стороне сервера. Я новичок в react, поэтому я не могу найти лучшего модуля для реализации этого. Я попробовал следующий код, который не возвращает никакой ошибки, но данные не загружаются в таблицу, даже если данные правильно получены из конечной точки.

 import React, {Component} from 'react';

import '../assets/css/datatable.css';

const $ = require('jquery');
$.DataTable = require('datatables.net');


class Table extends Component {
    
    componentDidMount() {
        $(this.refs.main).DataTable({
            dom: '<"#example">',
            processing: true,
            language: {
                "processing": 'Loading...'
            },
            serverSide: true,
            ajax: {
                url: 'http://localhost:5001/endpoint',
                type: 'post',
                dataSrc: ""
            },
            columns: [
                { "title": "value", "name":"value", "data": "value", "className":"link text-left text-nowrap" },
                { "title": "created_at", "name":"createdAt", "data": "createdAt", "className":"link text-left text-nowrap", "visible": false, "searchable": false}
              ]
        });
    }



    render() {
        return (
            <div>
                <table ref="main" />
            </div>);
    }
}


export default Table;
  

Пожалуйста, помогите мне решить эту проблему. Заранее благодарю вас.

Мой ответ API, как показано ниже.

 {
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    [
      "Airi",
      "Satou",
      "Accountant",
      "Tokyo",
      "28th Nov 08",
      "$162,700"
    ],
    [
      "Angelica",
      "Ramos",
      "Chief Executive Officer (CEO)",
      "London",
      "9th Oct 09",
      "$1,200,000"
    ]
  ]
}
  

Поэтому я добавляю ajax.dataSrc: 'data' это в datatable options. Он работает хорошо, и данные загружены.

Я думаю, dataSrc это ваша проблема