数据表-返回列作为超文本标记语言元素

Question

我在将一些客户端数据表逻辑迁移到服务器端时遇到了一些困难。

我当前的问题是，对于Datatables，如果要对一大组数据（20000行）进行分页，我首先需要加载控制器中的所有行，然后将它们传递给视图：

$records = \App\Records::get();

return view("example.datatables")->with(["records" => $records]);

然后，在加载所有内容和Datatables将记录分页为500页之前，需要等待大约2分钟：

$("#table").DataTable({
  paging: true,
  pageLength: 500,
  ...
});

我更改了Datatables声明，以通过ajax处理服务器端处理，如下所示：

$("#table").DataTable({
  processing: true,
  serverSide: true,
  ajax: {
    url: "...",
    type: "GET"
  }, paging: true,
  pageLength: 500,
  ...
});

让它按我所希望的方式工作非常顺利，但问题是Datatables正在覆盖或忽略我从ajax请求返回的内容：

$columnData = [];
foreach($recordsFromDatabase AS $record){
  $columnDataObject = [];

  $columnDataObject[0] = '<td class="myClass" data-property="myProperty"><input type="text" name="customInput[]"/></td>'

  ...

  $columnData[] = $columnDataObject;
}

return response()->json([
  "draw" => (int)$request->input("draw"),
  "recordsTotal" => $totalRecords,
  "recordsFiltered" => $totalFilteredRecords,
  "data" => $columnData,
  "error" => null
]);

基本上，我发回的是一个包含data的json响应，这是一个列数组，它们是

数据表给人一种错觉，认为这是正确的工作，但我最终

<tr role="row" class="even">
  <td class="sorting_1"><input type="text" name="customInput[]"/></td>
  ...
</tr>
<tr role="row" class="odd">
  <td class="sorting_1"><input type="text" name="customInput[]"/></td>
  ...
</tr>

它呈现

是否有某种方法可以告诉Datatables我返回的内容是有效的




Answer 1

因此，我仍然通过响应发送HTML，并使用datatable的createdRow回调，我能够将HTML解析为本地DOM元素，检查它们的类和属性，并根据需要将它们分配给行/列：

createdRow: function(row, data, rowIndex) {
  $.each($("td", row), function (colIndex) {
    var elementFromData = $.parseHTML(data[colIndex]);
    var element = elementFromData[0];

    var elementClass = $(element).attr("class");
    if(typeof elementClass !== undefined){
      $(this).addClass(elementClass);
    }

    var attributes = [
      {
        label: "data-id",
        value: $(element).attr("data-id")
      }, ...
    ];

    for(var i = 0; i < attributes.length; i++){
      var attribute = attributes[i];

      if(typeof attribute.value !== undefined){
        $(this).attr(attribute.label, attribute.value);
      }
    }
  });
}, ...

这可能不是最漂亮的解决方案，我知道从我的AJAX请求返回超文本标记语言是低效的，但是由于时间限制，这是我能想到的最好的解决方案。

Answer 2

您错误地使用了jQuery数据表。

您不应该发送

例如：

$('#example').DataTable( {
  "columnDefs": [ {
    "targets": 3,
    "createdCell": function (td, cellData, rowData, row, col) {
      $(td)
        .attr('data-property', rowData['myCustomProperty'])
        .addClass(rowData['myClass']);
    }
  } ]
} );

对于Laravel，使用优秀的Laravel数据表包在服务器端处理模式下正确显示表。