Question

我正在使用JQuery Datatable作为我的表列表。这是我的表结构

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

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

我也在分享我的数据表电话

$('#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"]中传递

根据列值过滤jquery数据表

1 个答案: