欄位為空時的復選框過濾表

我有一個帶有訂單的表格，其中一列是“跟蹤號”添加了一個復選框，以便用戶可以選擇何時查看所有訂單或僅查看沒有跟蹤號的訂單。這是視圖中的復選框：

<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條記錄，未選中時顯示全部。我希望它在選中復選框時顯示所有記錄，并在未選中時僅顯示沒有跟蹤號的記錄，非常感謝幫助:)

uj5u.com熱心網友回復：

這是一個演示：

看法：

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

結果：

標籤：

上一篇：找不到HttpPostedFileBaseVisualStudio2019

下一篇：在Foreachloop按鈕內單擊值不傳遞給控制器