JQuery DataTables Columns 使用数据自动初始化

Posted 2023-05-09

【中文标题】JQuery DataTables Columns 使用数据自动初始化

【英文标题】：JQuery DataTables Columns Initializing automatically with data

【发布时间】：2019-05-15 08:29:22

【问题描述】：

我有一个 JQuery DataTable，我已经使用了一段时间，我想我在这里遗漏了一些东西。

但是我最近遇到了直接绑定 JSON 数据的要求之一。

例如，我的 JSON 看起来像来自 API：

["componentNumber":"ABC","factory":"India","productNumber":"CR","productRevisionState":"123","placementTimeLocal":"2018-08-21T00:00:00","position":"up","componentNumber":"ABC","factory":"India","productNumber":"CR","productRevisionState":"123","placementTimeLocal":"2018-08-21T00:00:00","position":"up",
"componentNumber":"ABC","factory":"India","productNumber":"CR","productRevisionState":"123","placementTimeLocal":"2018-08-21T00:00:00","position":"up"]

我知道我可以使用 JSON 并在 Jquery 中取出列并将其传递给 Datatables 列，但是如果有一种简单的方法可以让 Datatable 自动获取列，例如：

    $.ajax(
                type: "Post",
                url: "http://localhost:5555/myapi",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) 
                    //datasource = data;
                    $('#myTable').DataTable(
                        "Data": JSON.parse(data),
                        "Columns" : JSON.parse(data)
                            );

                ,
                error: function (err) 
                    alert(err);
                
            )

我正在寻找的是：

JQuery 有没有这样的特性？如果没有，你能建议 任何其他可快速处理大型数据集的 Datatable 库。

我想摆脱围绕代码的所有额外循环

我无法更新返回数据的源系统

更新版本的代码，取自以下答案，感谢 Kiran 让我动了一点：

 $.ajax(
            type: "Post",
            url: "http://localhost:5555/myapi",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) 
             // **how to get rid of this loop? for looping columns**
                var adColumns = [];
                $.each(data[0], function (i, item) 
                    var col = 
                        data: i,
                        title: i
                    ;
                    adColumns.push(col);

        )


                //datasource = data;
                console.log(data);
                $('#myTable').DataTable(
                    "data": data,
                    "info": true,
                    "paging": true,
                    "columns": adColumns
                );

            ,
            error: function (err) 
                alert(err);
            
        )

【问题讨论】：

请参考此链接datatables.net/examples/data_sources/ajax 并仔细检查您的 json 数据原样或内容。谢谢。

【参考方案1】：

试试下面的代码。它可以帮助您达到预期的效果。这可能不是优化的代码。

希望这会有所帮助。

编辑

创建列名数组至少需要一个循环。因此您也可以使用以下代码消除多个循环。

var adColumns = [];
  Object.keys(strData[0]).forEach(key => 
    var col = 
      data: key,
      title: key
    ;

    adColumns.push(col);
  );

$(function() 

    var strData = [
            "componentNumber": "ABC",
            "factory": "India",
            "productNumber": "CR",
            "productRevisionState": "123",
            "placementTimeLocal": "2018-08-21T00:00:00",
            "position": "up"
        , 
            "componentNumber": "ABC",
            "factory": "India",
            "productNumber": "CR",
            "productRevisionState": "123",
            "placementTimeLocal": "2018-08-21T00:00:00",
            "position": "up"
        ,
        
            "componentNumber": "ABC",
            "factory": "India",
            "productNumber": "CR",
            "productRevisionState": "123",
            "placementTimeLocal": "2018-08-21T00:00:00",
            "position": "up"
        
    ];


    /*var dta = strData;

    var tableColumnNames = [];
    var keys = [];

    for (var i in strData) 
        var key = i;
        var val = strData[i];
        for (var j in val) 
            var sub_key = j;

            keys.push(sub_key);

        
    

    var sColumns = Array.from(new Set(keys));


    var adColumns = [];
    for (var col in sColumns) 

        var sKey = sColumns[col];

        var col = 
            data: sKey,
            title: sKey
        ;

        adColumns.push(col);


    */

    var adColumns = [];
    Object.keys(strData[0]).forEach(key => 
        var col = 
            data: key,
            title: key
        ;

        adColumns.push(col);
    );


    $('#myTable').DataTable(
        "data": strData,
        "columns": JSON.parse(JSON.stringify(adColumns))
    );


);

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="myTable">
</table>

【讨论】：

您的代码运行良好，但我希望摆脱循环！我已经更新了我的问题，它与 1 个循环一起工作，但如果我能摆脱所有这些循环，那就太棒了

在我看来至少需要一个循环。

我会用 1 Loop 接受你的答案，但遗憾的是 Datatable 没有自动获取列。您还有其他快速且快速完成工作的数据表吗？

@NipunAmbastha 还有另一个名为 jqgrid 的插件，但我不熟悉那个。也检查一下。

【参考方案2】：

DataTables 能够从 Ajax 可获取的几乎任何 JSON 数据源中读取数据。这可以通过将ajax 选项设置为JSON 数据源的地址来以最简单的形式完成。见This Link in DataTable Website。

至于您的 JSON，这里是 fiddle

【讨论】：

我的列可以随时更改，所以我不想明确定义它们。正如您调用 Ajax 一样，Datatable 可以直接将列名作为 JSON 作为键值对并绑定，而无需在 html 或 JQUERY 上的任何地方指定它