数据表搜索\过滤列中的值答案

【问题标题】：Datatables Search\Filter Value in Column数据表搜索\过滤列中的值
【发布时间】：2017-01-11 23:32:04
【问题描述】：

我创建了一个自定义下拉列表来过滤特定数据表列中的值。当我尝试使用所选值过滤\搜索列时，数据表保持不变。

数据表和过滤事件：

var table = $('#dt');
var dt = table.DataTable({
    ajax: {
        type: 'POST',
        cache: false,
        url: '/DataTablesHandler'
    },
    columns: [
        {
            data: 'idLevel',
            orderable: false,
            targets: 'no-sort',
            searchable: true
        },
        { data: 'email' },
        { data: 'phone' },
        { data: 'fax' }
    ],
    order: [0, 'asc'],
    processing: true,
    serverSide: true,
    orderMulti: false,
    bStateSave: true
});

//filter search on entity level change
$('#workEntityLevel').on('change', function ()
{
    var levelID = $(this).val();

    if (levelID == 0)
    {
        //clear search
        dt.search('').columns().search('').draw();
    }
    else
    {
        //search idLevel column (NOT WORKING!!!)    
        dt.columns(0).search(levelID).draw();
    }
});

我做错了什么？

【问题讨论】：

该列（级别id）的数据对象中的数据是整数还是字符串？
.val() 总是返回 string value.
@bindrid 是一个数字值（1、2、3、4、5 和 6）。但我已经测试过它强制一个字符串值，结果是一样的。
@Ricky 如果您要创建一个小提琴，它会更容易帮助您。
我尽可能使用我设置的表格测试了您的代码。它没有问题。所以，我想知道“缓存：假”和您的 ajax 设置是否导致 dt 期望搜索应用于服务器端。每次更改下拉菜单时，我都会检查是否触发了 ajax 调用。

标签： jquery datatables datatables-1.10

【解决方案1】：

尝试这样的事情，其中 ajax 是分开的（我没有测试这个，但你明白了）。

    var tableDefinition = {

        columns: [
            {
                data: 'idLevel',
                orderable: false,
                targets: 'no-sort',
                searchable: true
            },
            { data: 'email' },
            { data: 'phone' },
            { data: 'fax' }
        ],
        order: [0, 'asc'],
        processing: true,
        serverSide: false,
        orderMulti: false,
        bStateSave: true
    };

    $(function($) {

        table = null;
        $.ajax({url: '/DataTablesHandler',
            type: "POST",
            async: true,
            // if you know what the initial parameters are 
            // create an object that emulates it here.
            data : function() {JSON.stringify( { 'draw': 1, 'start': 0,
                      length:15 })},

            contentType: "application/json; charset=utf-8",
            success: function (data) {
                // fine tune your data. Mine comes back from a web service so this code fragment reflects that.
                var parsedData = JSON.parse( data.d);
                tableDefinition.data = parsedData;

                var table = $('#dt');
                var dt = table.DataTable(tableDefinition);
            },
            error: function(a,b,c) { debugger;}
        });

        //filter search on entity level change
        $('#workEntityLevel').on('change', function ()
        {
            var levelID = $(this).val();

            if (levelID == 0)
            {
                //clear search
                dt.search('').columns().search('').draw();
            }
            else
            {
                //search idLevel column (NOT WORKING!!!)    
                dt.columns(0).search(levelID).draw();
            }
        });

    });

【讨论】：

我正在尝试您的解决方案，但我的 DataTablesHandler 操作需要 Datatables 默认参数来查询和返回数据： public JsonResult DataTablesHandler(DTParameters param) {};我如何使用您的示例发送这些数据？
我添加了一个部分来创建参数对象。它应该被设置成服务器所期望的样子。
更新了例子，但是参数对象在服务端继续为空
你的服务端是什么样的？
我终于设法上传了参数对象（需要在每一列中包含 adicional 数据）。解析返回数据时，我收到以下错误：未捕获的 SyntaxError：JSON.parse () 位置 1 处的 JSON 中的意外标记 o。返回对象的打印和错误：imgur.com/a/tZHiS

【解决方案2】：

这是一个将 levelid 合并到 ajax 调用搜索中的版本，因此您可以使用它来过滤服务器端

    var table = $('#dt');
    var dt = table.DataTable({
        ajax: {
            type: 'POST',
            cache: false,
            data: function (search) {
                // fine tune what you need to send back here.
                search.levelID = $('#workEntityLevel').val();
                return JSON.stringify(search)},
            dataType:"json",
            url: '/DataTablesHandler'
        },
        columns: [
            {
                data: 'idLevel',
                orderable: false,
                targets: 'no-sort',
                searchable: true
            },
            { data: 'email' },
            { data: 'phone' },
            { data: 'fax' }
        ],
        order: [0, 'asc'],
        processing: true,
        serverSide: true,
        orderMulti: false,
        bStateSave: true
    });

    //filter search on entity level change
    $('#workEntityLevel').on('change', function ()
    {
        dt.draw();
    });

【讨论】：

根据我的阅读，dt.draw() 将触发 ajax 调用，我将在其中传回关卡 ID
测试了这个版本，它总是触发ajax调用。估计没有解决方法吧？