Datatable.Net - 按列搜索未呈现

问题描述

我正在使用 jQuery datatable.net 来呈现表格（服务器端）。包括过滤在内的一切工作正常。我选择按列实现搜索，但我似乎无法让它呈现值。当我输入一个值时，“正在处理”窗口显示并立即消失（它告诉我正在处理搜索字符串），但没有显示搜索结果。

我的数据表脚本如下：

@section scripts {
<script type="text/javascript">

    $(document).ready(function () {

        $('#contacts tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var contactlist = $('#contacts').DataTable({
            responsive: true,destroy: true,orderMulti: true,processing: true,serverSide: true,stateSave: true,stateSaveCallback: function (settings,data) {
                localStorage.setItem('DataTables_' + settings.sInstance,JSON.stringify(data))
            },stateLoadCallback: function (settings) {
                return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance))
            },oLanguage: {
                sSearch: ""
            },pagingType: "full_numbers",filter: true,rowId: "id",order: [[1,"asc"]],ajax: {
                url: "/Contact/GetContactList",type: "POST",datatype: "json"
            },columnDefs: [{
                targets: [0],visible: false,searchable: false
            }],"columns": [
                { data: "id",name: "Id",autoWidth: true},{ data: "firstName",name: "FirstName",autoWidth: true },{ data: "lastName",name: "LastName",{ data: "company",name: "Company",{
                    data: null,name: "Phone",autoWidth: true,defaultContent: "",render: function (data,type,row) {
                        var cell = "";
                        var office = "";
                        var other = "";
                        if (row.phoneCell != null) {
                            cell = "<i class='fas fa-mobile-alt'></i><a href='tel:" + row.phoneCell + "'>&nbsp;&nbsp;" + "<small>" + row.phoneCell + "</small></a>";
                        }
                        if (row.phoneOffice != null) {
                            if (cell != "") { office = "<br />"; }
                            office = office + "<i class='fas fa-building'></i><a href='tel:" + row.phoneOffice + "'>&nbsp;&nbsp;" + "<small>" + row.phoneOffice + "</small></a>";
                        }
                        if (row.phoneOther != null) {
                            if (office != "") { other = "<br />"; }
                            other = other + "<i class='fas fa-phone-square-alt'></i><a href='tel:" + row.phoneOther + "'>&nbsp;&nbsp;" + "<small>" + row.phoneOther + "</small></a>";
                        }
                        return cell + office + other;
                    }
                },{
                    data: "webSite",name: "WebSite",row) {
                        if (row.webSite != null) {
                            return "<i class='fas fa-globe-americas'></i><a href='" + row.webSite + "' target='_blank'>&nbsp;&nbsp;" + "<small>" + row.webSite + "</small></a>";
                        }
                    }
                },{ data: "campaign",name: "Campaign",defaultContent: "" },],initComplete: function () {
                var r = $('#contacts tfoot tr');
                r.find('th').each(function () {
                    $(this).css('padding',8);
                });
                $('#contacts thead').append(r);
                $('#search_0').css('text-align','center');

                var api = this.api();

                api.columns().every(function () {
                    var that = this;
                    $('input',this.footer()).on('keyup change',function () {
                        if (that.search() !== this.value) {
                            that.search(this.value);
                            that.draw();
                        }
                    });
                });
            }
        });

        $('.dataTables_filter input[type="search"]').
            attr('placeholder','Filter by first/last name or company ...').
            css({ 'width': '350px','display': 'inline-block' });

        $('#contacts tbody').on('click','tr',function () {
            debugger;
            var currentRowData = contactlist.row(this).data();
            var id = currentRowData.id;
            var url = "@Url.Action("View","Contact")?id=" + id;
            window.open(url,"_parent");
        });
    });

</script>

知道我做错了什么吗？

谢谢。

-- 瓦尔

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）