当字段为空时，复选框过滤器 table

Question

我有一个 table 订单，其中一列是“跟踪号” 添加了一个复选框，以便用户可以选择何时查看所有订单或仅查看没有跟踪号码的订单。这是视图中的复选框：

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

调用的 javascript 是：

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

选中复选框时显示 0 条记录，取消选中时显示全部。我希望它在选中复选框时显示所有记录，并且只显示没有跟踪号码的记录未选中时，帮助将不胜感激:)

Answer 1

这是一个演示：

查看：

<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>
}

列表输出：

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

结果：

当字段为空时，复选框过滤器 table

checkBox filter table when field is null

asp.net-mvc

asp.net-core

asp.net-mvc-4

asp.net-mvc-3