数据表：服务器端全局搜索未在“search[value][0]”中发送值

Posted 2023-05-07

【中文标题】数据表：服务器端全局搜索未在“search[value][0]”中发送值

【英文标题】：Datatable : Serverside global search does not send value in "search[value][0]"

【发布时间】：2018-01-17 05:00:38

【问题描述】：

我有带有服务器端 (MVC.net) 分页、排序、列过滤器和全局搜索的数据表，如下所示

html代码

    <table id="Grid" class="dataTable table table-striped table-bordered " style="width: 100% !important">
        <thead>
        <tr>
            <th>Name</th>
            <th>Name2</th>
            <th>name3</th>
            <th>name4</th>
            <th>name5</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>last name</th>

        </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        <tr>
                <th> <input class="form-control texts" type="text" placeholder="Filter Name" id="filter0" maxlength="180" /></th>
                <th> <input class="form-control texts" type="text" placeholder="Filter Host" id="filter1" maxlength="180" /></th>
                <th> <select class="form-control selects" id="filter2">
                    <option value="select">Select</option>
                    <option value="1">2</option> 
                    <option value="2">2</option>
                </select> </th>
                <th>
                    <select class="form-control selects" id="filter3">
                        <option value="select">Select</option>
                        <option value="1">true</option>
                        <option value="2">false/option>
                    </select>
                </th>
                <th><select class="form-control selects" id="filter4">
                    <option value="select">Select</option> 
                    <option value="True">True</option>
                    <option value="false">False</option>
                    </select> 
                </th>
                <th>
                    <select class="form-control selects" id="filter5">
                        <option value="select">Select</option>
                        <option value="True">True</option>
                        <option value="false">False</option>
                    </select>
                </th>
                <th></th>
                <th></th>
                <th>
                    <div class='input-group date col-xs-9' id="datepicker2">
                        <input class="form-control datepicker texts" type="text" placeholder="Filter Key expiration date" id="filter8" maxlength="10" />
                        <span class="input-group-addon">
                            <span class="ebsi-icon-calendar"></span>
                        </span>
                    </div>

                </th>
                <th>
                    <div class="btn-group btn-group-xs pull-right">
                         <input id="btnColumnFilters" class="datatable-action btn btn-sm btn-primary btn-secondary" type="button" value="Filter"/>
                        <input id="btnClearColumnFilters" class="datatable-action btn-sm btn btn-grey btn-secondary" type="button" value="Clear"/>
                    </div> 
                </th>
            </tr>
        <tfoot>
    </table>

javascript代码：

var ConfigTable = $('#Grid')
                .on('preXhr.dt', function(e, settings, data) 
                    $(".alert").hide(); // hide any alerts
                )
                .DataTable(
                    autoWidth: true,
                    lengthChange: false,
                    responsive: true,
                    searching: true,
                    ordering: true,
                    paging: true,
                    pageLength: 10,                      
                    serverSide: true,
                    order: [[0, "asc"]],
                    ajax: 
                        url: "/controller/action",
                        type: "POST",
                        datatype: "json",
                        error: function (xhr, error, thrown) 

                        ,
                        data: function(d) 
                            return $.extend(,
                                d,
                                
                                );
                        
                    ,
                    columns: [
                         "data": "Name", "name": "Name", "autoWidth": true, "searchable": true ,
                         "data": "Name2", "title": "Name2", "name": "Name2", "autoWidth": true, "searchable": true .....
                    ]
                );

按钮单击时的列过滤器

 //send column filter data on button click
        $("#btnColumnFilters").click(function() 
            filterColumns.map(function (key, value) 
                ConfigTable = ConfigTable.column(key).search($("#filter" + key).val());
            );
            ConfigTable.draw();
        );

//仅当用户点击回车或之前的输入已被清除时服务器端搜索

$('#Grid_filter input').unbind();
$('#Grid_filter input').bind('keyup', function(e) 
    if (e.keyCode == 13 || $(this).val() == "") 
        // clear all filter selection 
        resetColumnFilters();
        //apply filters
        ConfigTable.columns().search(this.value).draw();
    
);

服务器端代码

    [HttpPost]
            public JsonResult action(jQueryDataTableParamModel param)
            
//globla filter                  
 var search = Request.Form.GetValues("search[value]")[0];
                  // column filter  
 var Name = Request.Form.GetValues("columns[0][search][value]")[0];        

            

但我没有在服务器端的“Request.Form.GetValues("search[value]")[0]" 中获得全局搜索值。它总是作为一个空字符串出现。可能是什么问题，请帮忙。

我使用的是 1.10.2 版本的数据表插件。

更新 1：

在firebug的网络选项卡中检查ajax请求，为每个搜索参数请求发送空字符串，即使搜索值存在

搜索[值]：“”

更新 2： 如果我删除代码以仅在输入时发送全局过滤器值，它将搜索值发送到服务器

更新 3： 关于 this.value 的警报给出了一个值，但是 ConfigTable.columns().search(this.value).draw();不向服务器发送值

【问题讨论】：

我不认为这是您添加的任何标签的问题。如果没有，您可能需要更改标签以获得更好的帮助

谢谢Darren，但它与jquery数据表插件有关。我不确定是否要使用任何其他标签。

很难说...我们可以在您的数据函数中获得一个 console.log(d) 吗？

@amol 你说：but I am not getting global search value in "Request.Form.GetValues("search[value]")[0]" on the server side. it always comes as an empty string. 这不是你的问题吗？这与 dataTables 无关

不确定是否只是拼写错误，但您在此（在 ConfigTable 之后）有一个空格，这会破坏它ConfigTable .column(key).search($("#filter" + key).val())

【参考方案1】：

找到了解决方案。在发送全局过滤器时删除了 columns()

$('#Grid_filter input').bind('keyup', function(e) 
    if (e.keyCode == 13 || $(this).val() == "") 
        // clear all filter selection 
        resetColumnFilters();
        //removed columns()
        ConfigTable.search(this.value).draw();
    
);