如果不满足条件，则删除/删除数据表行
我的页面上有一个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。
1 个答案:
答案 0 :(得分：1)
如果只是要隐藏，则可以使用数据表的**“ dataSrc” 属性。
您只需要过滤 dataSrc 中的数据即可。
$(document).ready(function() {
$('#example').dataTable( {
"ajax": {
"url": "https://www.mocky.io/v2/5da81a871200004d00edab46 ",
"dataSrc": function(json) {
let data = json.demo;
//filtered whatever you want
var filtered = data.filter(function(value, index, arr){
return value[0] != 'Tiger Nixon';
});
return filtered;
}
}
} );
} );
Json数据
{
"demo": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009/01/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012/03/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008/11/28",
"$162,700"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012/12/02",
"$372,000"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012/08/06",
"$137,500"
],
[
"Rhona Davidson",
"Integration Specialist",
"Tokyo",
"6200",
"2010/10/14",
"$327,900"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009/09/15",
"$205,500"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008/12/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008/12/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013/03/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008/10/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012/12/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010/03/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012/11/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010/06/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009/04/10",
"$237,500"
]
]
}
供您参考，我将分享一个JSFiddle链接，我认为它将对您有所帮助。 链接：https://jsfiddle.net/amitmondal/28Lyndmv/28/
如果您有任何困惑，请随时告诉我。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？