如何开发MVC视图表中的按列搜索选项

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 value is null

有谁可以帮我？

Answer 1

您可以使用我成功集成到一些具有自定义列搜索的jQuery DataTable MVC项目中的ASP.NET，而不存在任何问题。

还有其他一些演示，但在第一步，前几页很可能对您来说就足够了。

DataTable (服务器端)

希望这能帮上忙。