checkBox filter table when field is null-CodePudding

I have a table with orders, one of the columns is "Tracking number" Added a checkbox to so user can choose when to see all orders or just orders without tracking numbers. here is the checkbox in view :

<div id="TrackingNumber">
    <input type="checkbox" name="pos" value=true/>Show All
</div>

the javascript called is :

<script>
    $(document).ready(function () {
        $.fn.dataTable.ext.search.push(
            function (settings, searchData, index, rowData, counter) {
                var positions = $('input:checkbox[name="pos"]:checked').map(function () {
                    return this.value;
                }).get();
                if (positions.length === 0) {
                    return true;
                }
                if (positions.indexOf(searchData[1]) !== -1) {
                    return true;
                }
                return false;
            }
        )
        var table = $('#tblData').DataTable();
        $('input:checkbox').on('change', function () {
            table.draw();
        });
    });</script>

when checkbox is checked it shows 0 records and when unchecked it shows all. i want it to show all records when checkbox is checked and show only records WITHOUT tracking numbers when Unchecked, Help will be much appreciated :)

CodePudding user response：

Here is a demo:

View:

<table id="tblList" class="table table-striped table-bordered" style="width:100%">
    <div>
        <input type="checkbox" id="pos" checked="checked"/>Show All
    </div>
    <thead class="thead-dark">
        <tr class="table-info">
            <th>pal</th>
            <th>via</th>
            <th>con</th>
            <th>TrackingNumber</th>


        </tr>
    </thead>
</table>
@section scripts{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(function () {
            var url = "GetAllPakingList";
            LoadPack(url);
            
        })
        function LoadPack(url) {
            $('#tblList').DataTable({
                destroy: true,
                ajax: {
                    url: url,
                },
                columns: [
                    { "data": "pal", responsivePriority: 1, "searchable": true },
                    { "data": "via", responsivePriority: 2, "searchable": true },
                    { "data": "con", responsivePriority: 3, "searchable": true },
                    { "data": "trackingNumber", responsivePriority: 4, "searchable": true },
                ],
            });

        };
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                var trackingNumber = data[3];
                if ($('#pos').prop("checked") != true && trackingNumber!="") {
                    return false;
                } else {
                    return true;
                }
            }
        );
        $('input:checkbox').on('change', function () {
            var table = $('#tblList').DataTable();
            table.draw();
        });
    </script>
}

ListOutput:

 public class ListOutput
    {
        public string pal { get; set; }
        public string via { get; set; }
        public string con { get; set; }
        public string TrackingNumber { get; set; }
        
    }

result: