javascript - 如何开发一个搜索选项以在 MVC View 表中按列搜索

Question

是否有正确的方法来按列搜索 .cshtml 表中的数据。每列必须有一个文本框。我用 javascript 尝试过，下面是我的代码。但它不起作用。谁能指导我正确地做到这一点？

        function searchSup()
    {
        $('#example thead th').each
            ( function ()
                {
                    var title = $(this).text();
                    $(this).html('<input type="text" id="SupInput" placeholder="Search ' + title + '" class="form-control"/>');
                } 
            );

        var input, filter, table, tr, td, i;
        input = document.getElementById("SupInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("SupTable");
        tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) 
                {
                    var supname = tr[i].cells[0].textContent.toUpperCase();
                    var contact = tr[i].cells[1].textContent.toUpperCase();
                    var address = tr[i].cells[2].textContent.toUpperCase();
                    var telephone = tr[i].cells[3].textContent.toUpperCase();
                    if (td) 
                        {
                            if (supname.indexOf(filter) > -1 || contact.indexOf(filter) > -1 || address.indexOf(filter) > -1 || telephone.indexOf(filter) > -1) 
                                {
                                    tr[i].style.display = "";
                                } 
                                else 
                                {
                                    tr[i].style.display = "none";
                                }
                        }
                }   
    }

我在这一行中收到错误 tr = table.getElementsByTagName("tr"); 说 getElementsByTagName 值为 null

有人可以帮助我吗？

Answer 1

您可以使用jQuery DataTable with Custom Column Search我成功地集成到一些 ASP.NET MVC 项目中，没有任何问题。

还有一些其他演示，但首先，前面的页面很可能足以满足您的需求。

DataTable (Server side)