时间戳

首页 > 解决方案 > 在数据表容器外追加列数据

javascript - 在数据表容器外追加列数据

问题描述

我正在使用 JQuery 数据表，从服务器加载数据后，我的表看起来像这样： 如您所见，我的表有六列。最后一列是合同产品，里面有相同的数据，我想获取值并将其显示在数据表之外，这样它就变得更加便于阅读，如图 2 所示。

我的代码如下所示：

 var table = $('#products').DataTable( {
        "processing": true,
        "serverSide": true,
        "paging":   true,
           "scrollX":"true",


      "ordering": [],
      "stateSave": false,
        "info":   true,
    "dom": 'lrtip',
    "ajax":

     {
      url:"xxxxxx_fetch.php",
            type:'POST'

    },
         
 "columns": [
            { data: "product_code_fk" },
            { data: "product_name" },
            { data: "start_date" },
            { data: "end_date" },
            { data: "pack_size" },
            { data: "contract_prod" }
           


      ],

 
  } );

在此处输入图像描述

在此处输入图像描述

标签： javascriptphphtmldatatables

解决方案

通过使用 DataTables 提供的页眉和页脚回调操作函数（headerCallback 和 footerCallback）。

在 HTML 中，例如

<tfoot>
 <tr>
  <th colspan="4" style="text-align:right">CONTRAT PROD :</th>
  <th></th>
 </tr>
</tfoot>

数据表

$('#example').DataTable( {
 "footerCallback": function ( row, data, start, end, display ) {
  let api = this.api(), data;
  ...

  $( api.column( 4 ).footer() ).html(
     your_DATA 
  );

推荐阅读