Удалить / удалить строку данных, если условие не выполнено

Question

На моей странице есть 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.

Answer 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/

Пожалуйста, не стесняйтесь, дайте мне знать, если у вас есть путаница.

Документация с датой: https://datatables.net/reference/option/ajax.dataSrc