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

Question

我有一个 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);
                }
            })

我正在寻找的是：

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

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

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

更新版本的代码，取自以下答案，感谢 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);
            }
        })

Answer 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>

Answer 2

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

至于您的 JSON，这里是 fiddle