jquery 数据表上方的搜索框

Posted 2023-03-10

【中文标题】jquery 数据表上方的搜索框

【英文标题】：Search box above a jquery datatable

【发布时间】：2016-07-08 11:41:42

【问题描述】：

我正在尝试在我的数据表上方放置一个简单的搜索框。实际上，我与另一个答案相去甚远，但无法让盒子进行一些实际搜索。我想我会将这种情况描述为“似乎我无法让盒子与数据表对话”

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

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 函数处理的情况。看来我需要在服务器端完成这项工作。

【参考方案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() ;
)

我希望它对你有用:) 谢谢

【讨论】：

这也是在***.com/questions/5990386/… 上推荐的，但不知何故对我不起作用:(

是的，这是推荐的。你看过jsfiddle关于使用自定义搜索框的内容吗？

也不工作:(当我在函数中放置警报时它会触发但我无法进行过滤工作。还在控制台上给出“table.fnFilter is not a function”错误。我猜它是关于版本的。我正在使用数据表 1.10.5

【参考方案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();
        )