DataTables 如何在带有 ajax 数据源的表上添加行号

Question

我使用 Angular 应用程序和数据表。在我的一个组件中，我有一个 DataTable，它使用选项对象的“ajax”属性从外部 API 中提取数据。

export class ChartsDetailsComponent implements OnInit {
  ngOnInit(): void {
   var opts: any = {
       ajax :{
          url: this.appConfigService.analyseConfig.chartsApiUrl + "/api/Charts/GetChartDetails?type=" + this.chartType,
          dataSrc: "ChartData." + this.chartType
       },
       columns:[
                  {title:"Name"},
                  {title:"Status"},
       ] 
   };
   var table = $('#details').DataTable(opts); 
  }
}

返回的数据结构如下：

{
"ChartData":{
            "FQCInLocalChart":[
                               ["EM/AC.08.2.01","Remote"],
                               ["EM/AC.08.2.03","Remote"]
                              ]
            }
 }

FQCInLocalChart 是动态的。它不是静态属性。这就是为什么我在dataSrc 属性中放置了"ChartData." + this.chartType，其中this.chartType 是Angular 组件的私有属性。

数据源仅包含必须显示的列，但我希望在填充有从 API 数据返回的列之前有一个行号。 有没有办法实现这种行为？

提前致谢 朱利安

Answer 1

我设法解决了我的问题。以下是我的做法： 首先，我将dataSrc 属性更改为function，而不是string：

export class ChartsDetailsComponent implements OnInit {
  chartType: string = "FQCInLocalChart";

  convertData(json: object){
     var ret = <Array<Array<string>>>json["ChartData"][this.chartType];
     ret.map((value)=>{
           value.unshift('');
         });
   return ret;
  }
  ngOnInit(): void {
    var opts: any = {
      ajax :{
      url: this.appConfigService.analyseConfig.chartsApiUrl + "/api/Charts/GetChartDetails?type=" + this.chartType,
      dataSrc: this.converData.bind(this)
      },
      columns:[
              {title:"Nr."},
              {title:"Name"},
              {title:"Status"},
      ] 
  };
  var table = $('#details').DataTable(opts); 
  table.on('order.dt search.dt', function () {
  table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
    cell.innerHTML = i + 1;
    });
  });

 }
}

基本上我从角度组件挂钩到dataSrc函数并将上下文绑定为组件的类，这就是我获得this.chartType属性的访问权限，在元素前面添加了另一个元素数组（保存行号），然后在最后连接 table.on() order 和 search 事件，以填充行号本身。

我希望这能帮助遇到与我相同或相似问题的人！

问候，

朱利安

Answer 2

一种方法是使用 DataTables 事件向表中添加和更新一列行号。这有两个方面：（1）表格的初始渲染； (2) 后续重新绘制进行排序和过滤。

对于我的演示，我将提供硬编码数据而不是使用 ajax，但我的方法应该与您的 ajax 方法兼容。

桌子：

 <table id="example" class="display dataTable cell-border" style="width:100%">
 </table>

我的测试数据：

var dataSet = {
    "ChartData": {
        "FQCInLocalChart": [
            ["EM/AC.08.2.01", "Remote1"],
            ["EM/AD.08.2.01", "Remote2"],
            ["EM/AC.08.2.01", "Remote3"],
            ["EM/AC.08.2.03", "Remote2"]
        ]
    }
};

数据表代码：

$(document).ready(function() {

    var table = $('#example').DataTable( {
      data: dataSet.ChartData.FQCInLocalChart,
      columns: [
        { title: "Name" },
        { title: "Status" }
      ],
      "initComplete": function() {
        addColNumbers();
      }
    } );

    table.on( 'draw', function () {
      rewriteColNumbers()
    } );

    function addColNumbers() {
      $('#example thead tr').prepend('<th>Num.</th>');
      $('#example tbody tr').each(function( index ) {
        $(this).prepend('<td>' + (index + 1) + '</td>');
      } );
    }

    function rewriteColNumbers() {
      $('#example tbody tr').each(function( index ) {
        $('td', this ).first().html(index + 1);
      } );
    }

} );

在上述方法中，initComplete() 函数处理向表中添加新列。

table.on( 'draw' ) 函数捕获后续重绘以进行排序/过滤。

最终结果：

这种方法意味着这个新列中的数据对 DataTables 不可见（它只会添加到 DOM 中） - 因此不参与任何排序/过滤。

如果您使用 DataTables 导出插件，这也意味着数据不会成为任何数据导出的一部分。

您可能想为这个新列添加一些样式/css，以控制其宽度。