时间戳

首页 > 解决方案 > 在 reactjs 中渲染数据表行

reactjs - 在 reactjs 中渲染数据表行

问题描述

我正在获取数据作为响应，但无法将其添加到数据表行。谁能帮我解决这个问题？

这就是我想要做的：

    export default (id) => {

  if (!$.fn.dataTable) return;

  $('#'+id).DataTable({
    destroy: true,
    pageLength: 8,
    responsive: true,
    ordering: false,
    searching: false,
    info: true,
    lengthChange: false,
    stripeClasses: [],
    processing: true,
    serverSide: true,
    ajax: {
      url  : `${Config.baseUrl}/homepark/list?page_no=1&settingType=dashboard&isActive=1&categoryId=active-listings`,
      type : 'GET',
      "beforeSend" : function(xhr) {
        xhr.setRequestHeader('userToken',localStorage.getItem('accessToken'));
      },
      "dataSrc": function ( json ) {
        const data = json.response.users
        console.log('@@@', data);
        // data = data.row\````
      },
    },
  });
};

这是我从后端得到的结果json.response.users：

(4) [{…}, {…}, {…}, {…}]
0: {name: "testt", data: "0"}
1: {name: "testt11", data: "1"}
2: {name: "testt11", data: "2"}
3: {name: "testt11", data: "3"}
length: 4
__proto__: Array(0)

标签： reactjsdatatabledatatables

解决方案

看起来那里有两个问题 -这里的这个例子展示了如何解决这两个问题。

您的数据不在“数据”对象下，它位于顶层，因此您希望将 ajax.dataSrc 设置为“”（参见示例）。当您返回一个对象数组时，您需要告诉 DataTables 列如何与对象的元素匹配。请参阅该示例中的 columns.data，

推荐阅读