【发布时间】：2019-10-18 07:51:52
【问题描述】：
我的页面上有一个datatable，通过单击按钮调用它。该表显示我的JSON 很好，但我有一个要求，即加深用户进入页面的方式决定应该显示哪些结果，这是我正在努力解决的问题。
这是我为每个 row 返回的数据
显示我的datatable：
我想要的是，如果返回的代码不等于 316（例如），那么不要添加 row，这就是我要崩溃的地方。
下面是我必须生成datatable 的所有代码。注释掉的代码，是我尝试过的，也是失败的地方。
callRatesDataTable = $('#callRatesDataTable').DataTable({
"ordering": true, // Allows ordering
"paging": true, // Pagination
"searching": true, // Searchbox
"info": false, // Shows 'Showing X of X' information
"pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
"pageLength": 10, // Defaults number of rows to display in table. If changing this value change the show/hide below
"dom":
"<'form-group row buttonRow'<'col-12 text-right'B>>" +
"<'row dropdownPageRow'<'col-6'l><'col-6'p>>" +
"<'row'<'col-12'tr>>" +
"<'row'<'col-6'l><'col-6'p>>",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
"buttons": [
{
extend: 'csv',
text: '<i class="fas fa-file-csv" style="font-size: large"></i>',
titleAttr: 'Click to download as a CSV',
filename: 'List of accounts',
className: 'd-flex align-items-center btn roundButton d-flex align-items-center justify-content-center lightYellowButton mb-0 roundButton',
},
{
extend: 'pdf',
orientation: 'landscape',
text: '<i class="far fa-file-pdf" style="font-size: large"></i>',
titleAttr: 'Click to download as a PDF',
filename: 'List of accounts',
className: 'd-flex align-items-center btn roundButton d-flex align-items-center justify-content-center lightYellowButton mb-0 roundButton',
},
{
extend: 'print',
text: '<i class="fas fa-print" style="font-size: large"></i>',
titleAttr: 'Click to print the results',
className: 'd-flex align-items-center btn roundButton d-flex align-items-center justify-content-center lightYellowButton mb-0 roundButton'
}
],
"fnDrawCallback": function () { },
"language": {
"lengthMenu":
"<span class='mb-2' style='display: flex'>" +
"<span class='mr-2 d-flex align-items-center'>Displaying</span>" +
"_MENU_" +
"<span class='ml-2 d-flex align-items-center'>records</span>" +
"</span>"
},
"ajax": {
"type": 'GET',
"url": 'test_JS_Files/jsonFiles/reseller_CallRates.json',
// "data": function (data) {
// return data;
// },
"dataSrc": function (res) {
// let data = res.data;
// var filtered = data.filter(function (code, index, arr,) {
// return code[0] != 599;
// });
// console.log(filtered)
// return filtered
return res.data;
},
"error": function () {
$('#callRatesDataTable_wrapper').hide();
$('#existingRuleLoadErrorMessage').html(
'<p>There was an issue retrieving data. Please try again.</p>' +
'<p>If the error keeps occurring, please get in touch.</p>').addClass('text-danger');
}
},
"columns": [
{
"data": null,
"render": function (data) {
return data.location.charAt(0).toUpperCase() + data.location.slice(1).toLowerCase();
}
},
{
"sorting": false,
"data": null,
"render": function (data) {
peakcharge = data.peakcharge;
peakcharge = +peakcharge;
if ($('#rateIncreaseField').val() != '') {
percentAmount = (peakcharge / 100) * percentAmountField
peakcharge = peakcharge + percentAmount;
peakcharge = peakcharge.toFixed(6);
}
return '<div class="input-group"><div class= "input-group-prepend"><span class="input-group-text font-weight-bold">£</span></div>' +
'<input name="peakchargeField" class="form-control col-6" type="number" min="0" placeholder="Enter an amount" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" value="' + peakcharge + '" disabled>' +
'</div>';
}
},
{
"sorting": false,
"data": null,
"render": function (data) {
offpeakcharge = data.offpeakcharge
offpeakcharge = +offpeakcharge;
if ($('#rateIncreaseField').val() != '') {
percentAmount = (offpeakcharge / 100) * percentAmountField
offpeakcharge = offpeakcharge + percentAmount;
offpeakcharge = offpeakcharge.toFixed(6);
}
return '<div class="input-group"><div class= "input-group-prepend"><span class="input-group-text font-weight-bold">£</span></div>' +
'<input name="offpeakchargeField" class="form-control col-6" type="number" min="0" placeholder="Enter an amount" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" value="' + offpeakcharge + '" disabled>' +
'</div>';
}
},
{
"sorting": false,
"data": null,
"render": function (data) {
connectioncharge = data.connectioncharge
connectioncharge = +connectioncharge;
if ($('#rateIncreaseField').val() != '') {
percentAmount = (connectioncharge / 100) * percentAmountField
connectioncharge = connectioncharge + percentAmount;
connectioncharge = connectioncharge.toFixed(6);
}
return '<div class="input-group"><div class= "input-group-prepend"><span class="input-group-text font-weight-bold">£</span></div>' +
'<input name="connectionchargeField" class="form-control col-6" type="number" min="0" placeholder="Enter an amount" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" value="' + connectioncharge + '" disabled>' +
'</div>';
}
},
{
"data": null,
"render": function (data) {
return data.manuallyupdated.charAt(0).toUpperCase() + data.manuallyupdated.slice(1).toLowerCase();
}
},
],
"createdRow": function () {
// var table = $('#callRatesDataTable').DataTable();
// $('#callRatesDataTable').DataTable().rows().eq(0).each(function (index) {
// var row = $('#callRatesDataTable').DataTable().row(index);
// var data = row.data();
// var currentPosition = data.code;
// if (currentPosition == 517) {
// $('tr').addClass('conMet');
// } else {
// $('tr').addClass('conNotMet');
// }
// });
// table.row('.conMet').remove().draw(false);
},
"initComplete": function () {
window.hideLoader();
// var table = $('#callRatesDataTable').DataTable();
// $('#callRatesDataTable').DataTable().rows().eq(0).each(function (index) {
// var row = $('#callRatesDataTable').DataTable().row(index);
// var data = row.data();
// var currentPosition = data.code;
// if (addResellerPath && currentPosition == 599) {
// $('tr').addClass('conMet');
// } else {
// $('tr').addClass('conNotMet');
// }
// });
// table.row('.conMet').remove().draw(false);
},
"destroy": true
});
JSON 文件代码
{
"data": [
{
"location": "One",
"code": 316,
"peakcharge": "0.002550",
"offpeakcharge": "0.002500",
"connectioncharge": "0.000000",
"manuallyupdated": "yes"
},
{
"location": "Two",
"code": 3000,
"peakcharge": "0.003000",
"offpeakcharge": "0.003000",
"connectioncharge": "0.000000",
"manuallyupdated": "no"
},
{
"location": "Three",
"code": 3001,
"peakcharge": "0.005000",
"offpeakcharge": "0.005000",
"connectioncharge": "0.000000",
"manuallyupdated": "no"
}
]
}
我可以添加class，但仍然显示不符合条件的行，我缺少什么？
查看JSON 文件代码我不想显示data[0].code 3000 和3001。
【问题讨论】：
标签： jquery datatable datatables