我正在使用带有服务器端处理的数据表。我需要向客户端发送额外的数据,因为我需要它来填充我的过滤器。 我希望在表格中显示的核心数据是带有词典的列表。
当我发送该列表时,此代码有效:
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]}
这是现在填充我的选择的代码。我想更改它以使用我的选择对象中的列表用于不同的列。
答案 0 :(得分:0)
好吧所以我一直坚持这个问题,但我终于想出了如何做到这一点。排序。
首先,您如何发送和获取从服务器发送的其他数据? 我这样做是因为没有将额外的数据放在发送到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>