获取数据表的主体作为 HTML 元素

Question

我有一个数据table，正在填充来自ajax->mysql 数据库的数据。填充后，我使用各种数据tables 工具，如“rowsGroup”、“searchColumns”等，使 table 看起来更好。

有什么方法可以将 table 主体作为带有 td 和 tr 的 tbody 元素并将其附加到变量？

我的问题是我的数据table 在 javsscript 中初始化时（应用了过滤器和插件等）看起来像我想要的那样，但我无法像那样导出它。

我的问题是，我如何才能将它导出到一个变量中以准确查看它的真实情况，以便我可以将它保存在某个地方并在页面或项目的其他地方重新使用它。

===TABLE 初始化===

let table;

    const getTableBody = async (crop) => {
      table = $('#pests_js_table').DataTable({
        "pageLength": 50,
        "processing": true,
        "ajax": {
          "url": '/assets/ajax/table_ajax_handler.php',
          "type": "POST",
          "data": {
            action: "getPestsForTable"
          }
        },
        "rowsGroup": [

        ],
        "columns": [{
            "data": "crop"
          },
          {
            "data": "weeds"
          },
          {
            "data": "chemical"
          },
          {
            "data": "product"
          },
          {
            "data": "rate"
          },
          {
            "data": "max_no"
          },
          {
            "data": "hi"
          },
          {
            "data": "mrl"
          },
          {
            "data": "pcs_no"
          },
          {
            "data": "supplier"
          },
          {
            "data": "use_by_date"
          }
        ],
        "searchCols": [{
          "search": String(crop) || null
        }],
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": true
          },
          {
            "targets": [1],
            "visible": true,
            "searchable": true
          }
        ],
        "order": [
          [2, "asc"]
        ],
        "rowsGroup": [
          1, 2, 4, 5, 6, 7, 9
        ]
      });

      return table.outerHTML;
    }

    const exportPdf = async () => {
      let crops = <?=json_encode($crops)?>;
      //console.log(crops);

      // crops.map(async crop => {
      //   let tableBody = await getTableBody(crop);
      //   console.log(tableBody);
      // });

      let tableBody = await getTableBody('v7xn82Ff3XQFYwCl');
      console.log(tableBody);
    }

Answer 1

对于像您这样的更复杂的需求，您将需要将 DataTables 功能与一些额外的逻辑（在本例中为 JavaScript）相结合，以迭代 table你需要。

因此，以下示例不是一个完整的解决方案 - 它只是展示了如何使用应用的过滤器创建原始 table 的一个副本。但这可以扩展为逐个遍历你们的每个大陆。

该代码创建了一个名为 tableCopy 的变量，其中包含原始 table 的克隆。然后，您可以使用 tableCopy.outerHTML 获取复制的 table.

的完整 HTML

$(document).ready(function() {

let table = $('#example').DataTable( {
  // my test data is sourced from a JavaScript variable, not from ajax:
  data: dataSet,
  // my custom code will not work if deferRender is true:
  "deferRender": false,
  // for testing, provide pre-filtered data:
  "search": {
    "search": "ni"
  },
  columns: [
    { title: "ID", data: "id" },
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { title: "Start date", data: "start_date" },
    { title: "Extn.", data: "extn" },
    { title: "Salary", data: "salary" }
  ]

} ); 

  let tableCopy = document.getElementById("example").cloneNode(true);
  tableCopy.id = 'my_copy'; // the cloned table needs a unique ID

  //remove the (incomplete) set of <tr> nodes in the <tbody> node, since they
  // only account for the initially displayed set of rows (one page of data):
  $('tbody', tableCopy).empty();

  // we will not select any rows which have been filtered out (and are therefore hidden):
  let rowsSelector = { order: 'current', page: 'all', search: 'applied' };
  // build a complete set of <tr> nodes using the DataTables API:
  table.rows( rowsSelector ).every( function ( rowIdx, tableLoop, rowLoop ) {
    $('tbody', tableCopy).append( this.node() );
  } );

  //console.log( tableCopy.outerHTML );

  $('#displayTarget').html( tableCopy.outerHTML );

  // redraw the main table to re-display the removed <tr> nodes:
  table.draw( false );

} );

在您的情况下，您需要扩展此方法以处理 table.

的多个副本

我还没有测试过以下内容 - 但这显示了方法：

您需要一个值数组来保存副本：

让table份数=[]； contients.forEach(函数(项目,索引){ tableCopies.push(document.getElementById("示例").cloneNode(true)); table份数[index].id = 'table_' + item; // 例如：'table_Europe' });
您需要扩展此部分：

table.rows( rowsSelector ).every( function ( rowIdx, tableLoop, rowLoop ) {
  $('tbody', tableCopy).append( this.node() );
} );

不是使用原始 table 中的过滤数据，而是遍历每一行 - 而不会使用 rowsSelector:

table.rows().every( ... )

在该函数的主体中，您将检查当前行中是哪个大陆：

table.rows( rowsSelector ).every( function ( rowIdx, tableLoop, rowLoop ) {
  let continent = this.data().continent;
  // and add the relevant continent row to the related object in the `tableCopies` array.
} );

获取数据表的主体作为 HTML 元素

Get body of datatable as HTML element

javascript

datatable

datatables