Question

我使用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()方法来刷新列表的内容。

Answer 1

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

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

.dataTables_filter {
    display:none;
}

，或者使用sDom |创建自己的表格other link

见下面的摘录：

＆＃13;

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

＆＃13;

.dataTables_filter {
  display:none;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: