数据表:Serverside全局搜索不会在" search [value] [0]"中发送值。

时间:2017-08-09 10:41:43

标签: jquery-plugins datatables

我有数据表与服务器端(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];        

            }

但我没有在&#34; Request.Form.GetValues(&#34; search [value]&#34;)[0]&#34;中获得全局搜索值。在服务器端。它总是以空字符串形式出现。可能是什么问题,请帮忙。

我正在使用1.10.2版本的datatable插件。

更新1:

在firebug的网络选项卡中检查ajax请求,每个搜索参数请求都会发送空字符串,即使搜索值在那里

搜索[值]:&#34;&#34;

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

更新3: this.value上的警报给出了一个值但是 。ConfigTable.columns()搜索(THIS.VALUE).draw();不向服务器发送值

1 个答案:

答案 0 :(得分:0)

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

$('#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();
    }
});