根据列值过滤jquery数据表

Question

我将 JQuery Datatable 用于我的表列表。 这是我的表结构

UserName        |        Education
---------------------------------------------
Philip          |        Graduate
John            |        Post Graduate
Alex            |        Graduate
Emily           |        Phd
Elan            |        Post Graduate
George          |        Phd
....................................
....................................
Tom             |        Graduate
------------------------------------------------------

但我需要在过滤文本框旁边放置一个下拉列表，其中将有 3 个选项。当我们选择第一个选项说毕业生时，这将只列出毕业生，同样如果我们选择 phd，那将只列出 phd 用户。希望问题很清楚。

我也在分享我的数据表调用

$('#tbl_users').dataTable({
    "sDom": "<'row'<'col-md-6'i><'col-md-3'f>>t<'space20'><'row'<'col-md-3'l><'col-md-9'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {

        "sInfo": "<span class='label label-info'>_START_</span> to <span class='label label-info'>_END_</span> of <span class='label label-info'>_TOTAL_ users</span>",
        "sEmptyTable": "<div class='alert alert-info'>No users in this Account</div>",
        "sSearch": "<span class='input-icon'><i class='clip-search-2 '></i>_INPUT_</span>",
        "sLengthMenu": '<div class="form-group"><select class="form-control">' +
        '<option value="6">6</option>' +
        '<option value="10">10</option>' +
        '<option value="20">20</option>' +
        '<option value="50">50</option>' +
        '<option value="-1">All</option>' +
        '</select> /Page</div>'
    },
    "iDisplayLength": 6,
    "bDestroy": true,
    "bSort": false,
    "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0]}]
});

希望情况清楚...

Answer 1

您可以为此使用fnFilter 函数。

假设您的新选择列表的 id 为 MySelectList，您将为更改事件创建一个侦听器并调用 fnFilter，传递所选值。

$("#MySelectList").on('change', function () {
    oTable.fnFilter(this.value, 0);
});

要完成这项工作，您需要像这样初始化数据表：

var oTable = $('#tbl_users').dataTable({
...

根据您填充数据的方式，您需要满足代码隐藏中的自定义过滤器值，如果您这样做，参数将在Request["sSearch_0"] 中传递