发送到数据表的多个对象，如何初始化？

Question

我在服务器端处理中使用数据table。我需要向客户端发送额外的数据，因为我需要它来填充我的过滤器。我想在 table 中显示的核心数据是一个包含字典的列表。

当我发送该列表时，这段代码有效：

$('#dataTables-outputTest').DataTable({
"processing": true,
"serverSide": true,
"ajax": "/TestData/data-source",
"columns": [
    { "data": "thing1",
      "searchable": true},
    { "data": "thing2",
     "searchable": true},
     ...
    { "data": "link",
     "searchable": false,
     "orderable": false},
],

我现在想发送额外的数据并且仍然能够只显示这些项目。

新的 JSON 将如下所示：

{'objlist': [{'thing1': '1thing1', 'thing2': '1thing2'},
{'thing1': '2thing1', 'thing2': '2thing2'}], 
'select':[list1, list2]}

可能有一些拼写错误，但它会是一个包含两个对象的字典。一个是字典列表，一个是列表列表。

如何初始化我的数据table 以像以前一样使用 objlist 参数而不使用额外的对象？我怎样才能达到 select 对象中的值？

在此处编辑：

"initComplete": function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }

这是现在填充我的 select 的代码。我想更改它以将我的 select 对象中的列表用于不同的列。

Answer 1

好吧，我在这个问题上被困了一段时间，但我终于找到了解决方法。有点。

首先，您如何发送和获取从服务器发送的附加数据？我通过不将额外数据放在发送到 DataTable 的数据标记中来做到这一点。我是这样发送的：

 {'draw': '1',
  'recordsTotal': 13,
  'recordsFiltered': 13,
  'selects': [[1thing1, 2thing1], ['1thing2, 2thing2']],
  'data': [{'thing1': '1thing1', 'thing2': '1thing2'},
           {'thing1': '2thing1', 'thing2': '2thing2'}
  ],

然后在客户端，您可以通过以下方式获取 JSON 数据：

"initComplete": function (data) {
        var selects = data.json.selects;

我从服务器发送的数据隐藏在 data.json.

中

对于我的第二个问题，如何使用这些知识来动态填充两个选择我使用了这段代码：

$(document).ready( function () {
var testtable = $('#dataTables-outputTest').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        url: '/TestData/data-source',
        data: function (data) {
            var min = parseFloat( $('#min').val());
            var max = parseFloat( $('#max').val());
            var testselect = $( "#test-filter" ).val();
            var gearselect = $( "#gear-filter" ).val();
            data.min = min;
            data.max = max;
            data.testselect = testselect;
            data.gearselect = gearselect;
        }
    },
    "columns": [
        { "data": "PAnr",
          "searchable": true},
        { "data": "gear",
         "searchable": true},
        { "data": "ratio",
         "searchable": true},
        { "data": "oiltype",
         "searchable": true},
        { "data": "oiltemp",
         "searchable": true},
        { "data": "link",
         "searchable": false,
         "orderable": false},
    ],
    "initComplete": function (data) {
        var selects = data.json.selects;
        var test = selects[0];
        var gear = selects[1];
        for (var i = 0; i < test.length; i++) {
            var option = '<option value="'+test[i]+'">'+test[i]+'</option>'
            $(option).appendTo("#test-filter");
        }
        for (var i = 0; i < gear.length; i++) {
            var option = '<option value="'+gear[i]+'">'+gear[i]+'</option>'
            $(option).appendTo("#gear-filter");
        }
    }
    });
    $('#test-filter').change(function(table){
        testtable.draw(false);
    });

    $('#gear-filter').change(function(table){
        testtable.draw(false);
    });

    $('#min').on('keyup', function(table){
        testtable.draw(false);
    });

    $('#max').on('keyup', function(table){
        testtable.draw(false);
    });
});

在我的 HTML 我有这个：

            <div class="panel-body">
                <div class="form-group col-lg-3">
                    <label>Test</label>
                    <select id="test-filter" class="form-control">
                        <option value="None"></option>

                    </select>
                </div>
                <div class="form-group col-lg-3">
                    <label>Gear</label>
                    <select id="gear-filter" class="form-control">
                        <option value="None"></option>

                    </select>
                </div>
                <div class="range-filter form-group col-lg-3">
                    <div class="ratio-range col-lg-5">
                        <label>Min Ratio</label>
                        <input type="text" id="min" class="form-control" name="min">
                    </div>
                    <div class="ratio-range col-lg-5">
                        <label>Max Ratio</label>
                        <input type="text" id="max" class="form-control" name="max">
                    </div>
                </div>

发送到数据表的多个对象，如何初始化？

Multiple objects sent to datatables, initialize how?

javascript

dictionary

list

datatables