Question

我正在使用带有服务器端处理的数据表。我需要向客户端发送额外的数据，因为我需要它来填充我的过滤器。我希望在表格中显示的核心数据是带有词典的列表。

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

line-height:1;

我现在想要发送额外数据，但仍然可以只显示这些项目。

新的JSON将如下所示：

$('#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},
],

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

如何初始化我的数据表以使用objlist参数，就像之前没有额外的对象一样？我怎样才能达到选择对象中的值？

在这里编辑：

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

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

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>

多个对象发送到datatables，初始化如何？

1 个答案: