當欄位為空時，復選框過濾表

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

<div id="TrackingNumber"/span>> <input type="checkbox" name="pos" value=true/> 顯示全部 </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 (position.length === 0) {
                    return true;
                }
                if (position.indexOf(searchData[1]) !== 1) {
                    return true。
                }
                return false;
            }
        )
        var table = $('#tblData'/span>).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"/>顯示全部
    </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="styleheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

    <腳本 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"/span>;
            LoadPack(url)。
            
        })
        function LoadPack（url） {
            $('#tblList').DataTable({
                銷毀。true,
                ajax: {
                    url: url,
                },
                列。[
                    { "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'/span>).DataTable();
            table.draw();
        });
    </script>
}

ListOutput:

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

結果。

標籤：

上一篇：從共享布局中檢索資料庫值

下一篇：如何在MVC中只發布串列中的選定專案