Столбцы JQuery DataTables Инициализируются автоматически с данными

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. Iне могу обновить исходную систему, откуда возвращаются данные

Обновленная версия кода, взяты ответы ниже, спасибо Кирану, что заставил меня немного двигаться:

 $.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 имеет возможность считывать данные практически из любого источника данных JSON, который может быть получен Ajax.Это можно сделать в самом простом виде, задав опцию ajax для адреса источника данных JSON.См. Эта ссылка на веб-сайте DataTable .

Что касается вашего JSON, то здесь есть скрипка