数据表以编程方式应用过滤器答案

【问题标题】：Datatables programmatically apply filter数据表以编程方式应用过滤器
【发布时间】：2018-01-08 11:58:32
【问题描述】：

我使用 datatables jquery 插件来显示一个列表，该列表是使用对服务器的 ajax 调用加载的。我使用bFilter 属性来隐藏过滤器，因为我想将搜索输入放在我的侧边栏中。

$(function () {
    var generatedCustomerTable = $('#ItemsTable').DataTable({
        "order": [[0, "desc"]],
        "bSort": true,
        processing: true,
        serverSide: true,
        ajax: {
            url: "/api/Ajax/Test",
            method: "POST",
        },
        columns: [
            { visible: false, data: "id" },
            { orderable: false, data: "name" },
            { orderable: false, data: "value" },
        ],
        bLengthChange: false,       // Hide the page size
        bFilter: false,             // Hide the search box
        ordering: true,
        paging: true,
        pagingType: "full_numbers",
        pageLength: 10,
        language: {
            paginate: {
                first: '«',
                previous: '‹',
                next: '›',
                last: '»'
            },
            aria: {
                paginate: {
                    first: 'First',
                    previous: 'Previous',
                    next: 'Next',
                    last: 'Last'
                }
            }
        }
    });

    $("#btnTest").click(function () {
        // I WANT HERE TO SET THE FILTER
        generatedCustomerTable.draw();
    });
});

我想以编程方式设置过滤器文本，但我还没有找到方法。

是否有某种函数可以让我设置过滤器值，以便我能够调用.draw() 方法来刷新列表的内容。

【问题讨论】：

标签： javascript jquery css datatables

【解决方案1】：

在您的代码中，将 bFilter 设置为 false 不仅会隐藏搜索框，还会禁用 dataTable 中的搜索功能，

为了创建您自己的自定义搜索框，您必须启用bFilter，然后通过设置隐藏默认搜索控件（推荐）：

.dataTables_filter {
    display:none;
}

，或者您使用sDom 制作自己的表格渲染 | other link

见下面的片段：

var dataSet = [
    [ 1, "Name 1","one" ],
    [ 2, "BRimos", "JS" ],
    [ 3, "pitaridis","Data" ],
    [ 4, "Stack", "overflow" ],
    [ 5, "Name 2","two" ],
    [ 6, "Name 3","three" ],
    [ 7, "Name 4","one" ],
    [ 8, "BRimos 2", "JS" ],
    [ 9, "pitaridis 2","Data" ],
    [ 10, "Stack 2", "overflow" ],
    [ 11, "Name 5","two" ],
    [ 12, "Name 6","three" ]
  ];
$(function () {
    var generatedCustomerTable =$('#ItemsTable').DataTable( {
        "order": [[0, "desc"]],
        "bSort": true,
        data: dataSet,
        columns: [
            {  visible: false,title: "id" },
            {  orderable: false,title: "name" },
            {  orderable: false,title: "value" }
        ],
        bLengthChange: false,       // Hide the page size
        bFilter: true,             // Hide the search box
        ordering: true,
        paging: true,
        pagingType: "full_numbers",
        pageLength: 5,
        language: {
            paginate: {
                first: '«',
                previous: '‹',
                next: '›',
                last: '»'
            },
            aria: {
                paginate: {
                    first: 'First',
                    previous: 'Previous',
                    next: 'Next',
                    last: 'Last'
                }
            }
        }
        
    } );

    $("#btnTest").click(function () {
       console.log($("#filter").val(),generatedCustomerTable);
        generatedCustomerTable
        .search($("#filter").val()).draw();
    });
});

.dataTables_filter {
  display:none;
}

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<input id="filter" type="text" />
<button id="btnTest">search</button>

<table id="ItemsTable" width="100%"></table>

【讨论】：