Question

我试图在我的数据表上面放一个简单的搜索框。实际上我从另一个答案得到了这个远，但无法设法让盒子做一些实际的搜索。我想我已经将情况描述为＆＃34;似乎我无法让数据框与＃34;

进行对话。

我的数据表现在看起来像这样。

var datatable = null;
$(document).ready(function () {
    $.extend(true, $.fn.dataTable.defaults, {
        "searching": false,
        "ordering": false
    });

    //var data = "3";

    @*var dataSourceUrl = "@Url.Action(  Inbox ? "InboxList" : "OutboxList" ,"Folder")";*@
    @*var dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")";*@

    if (Type == 1) {
        var dataSourceUrl = "@Url.Action( Inbox ? "ERPListByType" : "OutboxList" ,"Folder")";
    } else if (Type == 2) {
        var dataSourceUrl = "@Url.Action( Inbox ? "InboxListByType" : "OutboxList" ,"Folder")";
    } else {
        var dataSourceUrl = "@Url.Action( Inbox ? "OutboxListByType" : "OutboxList" ,"Folder")";
    }



    datatable = $('#expandabledatatable').dataTable({
        //"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
        //"processing": true,
        //info: false,
        serverSide: true,
        ajax: {
            "url": dataSourceUrl,
            "data": { DocumentTypeId: DocumentTypeId },
            "type": "POST"
        },
        columns: [
            {
                "data": "Id",
                "render": function (data, type, row) {
                    return "<label><input type='checkbox' value='" + data + "' name='chkGrid'><span class='text'></span></label>";
                }
            },
            { "data": "@Html.Raw(Inbox ? "SenderCompany" : "ReceiverCompany")"  },
            { "data": "DocumentTypeName" },
            {
                "data": "RegistrationDate",
                "render": function (data, type, row) {
                    return moment(parseInt(data.substr(6))).format('DD.MM.YYYY hh:mm');
                }
            },
            {
                "data": "RegistrationCode",
                "render": function (data, type, row) {
                    console.log(row);
                    return "<a href='@Url.Action("View","Folder")/" + row["Id"] + "'>" + data + "</a>";
                }
            },
            { "data": "CustomsTransportType" },
            { "data": "VehicleIdNo" },
            { "data": null, "defaultContent": "" },
            { "data": "ConsignorName" },
            { "data": "ConsigneeName" },
            { "data": "TotalNoOfPackages" },
            { "data": "TotalGrossWeight" }
        ],
        iDisplayLength: 10,
        language: {
            "info": "Toplam kayıt : \_TOTAL\_<br/> Gösterilen : \_START\_ - \_END\_",
            "paginate": {
                "first": "İlk",
                "last": "Son",
                "next": "İleri",
                "previous": "Geri"
            }
        }
    });
    var table = $('#expandabledatatable').DataTable();

    $(function () { 
        $('#inpSearch').on('keyup', function () {
            alert(this.value);
            table
                .search(this.value)
                .draw();
        });
    });
});

很明显，我错过了一些东西，但我无法理解。任何人都可以帮助我吗？

编辑：此问题被标记为重复，并在另一个问题上有答案，但我无法获得这些答案。可能我错过了什么。

我对数据表代码进行了一些更改，并在问题中对其进行了更新。 Datatables.net说columns.searchable默认为true，所以我从我的代码中删除了该设置。

当在文本框中按下某个键但没有执行实际搜索时，我可以收到警报。顺便说一句，我使用的是数据表版本1.10.5。

编辑2：我注意到我放在数据表上方的文本类型输入中的每次击键都会导致同一个查询作为POST发送。

编辑3：我认为这不是我可以使用jquery函数处理的情况。好像我需要在服务器端完成这项工作。

Answer 1

您可以使用DataTables api过滤表格。

您所需要的只是您自己的input field keyup event。

类似这样的内容：

HTML：

<input type="text" id="myInputTextField">

JavaScript的：

oTable = $('#myTable').DataTable();   
$('#myInputTextField').keyup(function(){
  oTable.search($(this).val()).draw() ;
})

我希望它适合你:)谢谢

Answer 2

您可以尝试使用以下代码：

        //With Addition of following lines of code in your Datatable

        "fnServerParams": function (aoData) {
                        aoData.push
                        (
                            //search param
                            { "name": "searchParameter", "value": $("#inpSearch").val() }                                    
                        )
                    },

    // keyUp event
    oTable = $('#expandabledatatable').DataTable();   
        $('#inpSearch').on('keyup', function () {
          oTable.fnDraw();
        })

jquery数据集

2 个答案: