带有数据表 JavaScript 的动态列

Dynamic columns with Datatables javascript

本文关键字：动态 JavaScript 数据表      更新时间：2023-09-26

js 以显示 JSON 文件。我提取我的列的名称并构建一个这样的数组：

columns = ["Date", "C2R", "CM", "Total"]

我的 sTitle 和 mData 具有相同的名称，所以我尝试这样做但失败了。

    jQuery('#result_example').dataTable( {
        "data": result_table,
        "columns": [
            jQuery.each(columns, function(i, value){
                //console.log(value); which give ["Date", "C2R", "CM", "Total"]
                { "sTitle": + value + , "mData": + value + },  
            })
        ],
        paging: true,
        searching: false,
        "bInfo" : false 
    } );

目标是得到这样的结果：

    jQuery('#result_example').dataTable( {
        "data": result_table,
        "columns": [
                { "sTitle": "Date" , "mData": "Date" },
                { "sTitle": "C2R" , "mData": "C2R" },
                { "sTitle": "CM" , "mData": "CM" },
                { "sTitle": "Total" , "mData": "Total" }
        ],
        paging: true,
        searching: false,
        "bInfo" : false 
    } );
您可以在

外部构建一个对象，然后在内部使用它dataTable 

var clmns = [];
jQuery.each(columns, function(i, value) {
    clmns.push({ "sTitle": value, "mData": value}); // push it in
});    
jQuery('#result_example').dataTable({
    "data": result_table,
    "columns": clmns, // use it here
    paging: true,
    searching: false,
    "bInfo": false
});

问题：

当你执行你的数据表代码时，它

不会得到列名，因为你稍后会提取它，但此时数据表代码已经执行，所以你可以做的是jQuery.map()创建一个数组，里面填充了columns数组每次迭代的对象：

var colData = $.map(columns, function(colName) { // creates an array
   return { "sTitle": colName, "mData": colName};// fills with js objects
}); 
jQuery('#result_example').dataTable( {
     "data": result_table,
     "columns":colData, //<---------you can pass it here.
     // other code as is
});
相关文章：