Question

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

DataTable和过滤事件：

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

我做错了什么？

Answer 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();
            }
        });

    });

Answer 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();
    });

数据表在列中搜索\过滤值

2 个答案: