数据表插件搜索特定列不起作用答案

【问题标题】：Datatables plugin search specific column not working数据表插件搜索特定列不起作用
【发布时间】：2020-06-08 14:05:37
【问题描述】：

我尝试使用此代码创建单独的搜索字段。

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    </head>
    <body>

        <h1>DataTables Server Side</h1>
        Seacrch specific column : <input id="column3_search" type="text"/>
        <table id="example" class="display nowrap" style="width:100%; background-color: black; color: white;">
            <thead>
                <tr>
                <th>Column A</th>
                <th>Column B</th>
                <th>Column C</th>
                <th>Column D</th>
                </tr>
            </thead>
        </table>
    </body>
     <!-- DataTable Pagination-->
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.21/r-2.2.5/datatables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.21/r-2.2.5/datatables.min.js"></script>

</html>
<script>
    $(document).ready(function() {

    var table = $('#example').DataTable({
        bProcessing: true,
        bServerSide: true,
        deferRender: true,
        sPaginationType: "full_numbers",
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        bjQueryUI: true,
        sAjaxSource: 'load_table_data',
        columns: [
            {"data": "Column A"},
            {"data": "Column B"},
            {"data": "Column C"},
            {"data": "Column D"}
        ]
    });

    $('#column3_search').on( 'keyup', function () {
    table.columns(1) 
        .search( this.value )
        .draw();
    } );


} );
</script>

我指定 <input id="column3_search" type="text"/> 来搜索列索引 1 的字段，但是当我搜索它时，不进行任何搜索，只显示一秒钟的处理并完成。

当我删除 .column() 时，并尝试使用此代码进行搜索。

   $('#column3_search').on( 'keyup', function () {
    table.columns(1) 
        .search( this.value )
        .draw();
    } );

通过搜索表中的所有列可以正常工作。那么这段代码有什么问题，我该如何解决。

这是我的 table_schemas。

SERVERSIDE_TABLE_COLUMNS = [
    {
        "data_name": "A",
        "column_name": "Column A",
        "default": "",
        "order": 1,
        "searchable": True
    },
    {
        "data_name": "B",
        "column_name": "Column B",
        "default": "",
        "order": 2,
        "searchable": True
    },
    {
        "data_name": "C",
        "column_name": "Column C",
        "default": 0,
        "order": 3,
        "searchable": True
    },
    {
        "data_name": "D",
        "column_name": "Column D",
        "default": 0,
        "order": 4,
        "searchable": True
    }
]

【问题讨论】：

标签： html jquery datatables

【解决方案1】：

您需要在列属性中定义目标和可搜索属性。

columns: [
            {"data": "Column A","targets":0,"searchable":true},
            {"data": "Column B","targets":1,"searchable":true},
            {"data": "Column C","targets":2,"searchable":true},
            {"data": "Column D","targets":3,"searchable":true}
        ]  

$("#column3_search").on("input", function (e) {
           table.columns(1).search($(this).val()).draw();
        });

【讨论】：

【解决方案2】：

如果您只想在数据表上显示它，您应该添加filter，然后添加draw：

$('#column3_search').on('keyup', function() {
  let string = $(this).val();
  table.columns(1).data().filter(function(value, index) {
    return value === string ? true : false;
  }).draw();
});

【讨论】：

感谢您的回复，我尝试使用您的代码，但它仍然无法正常工作，当我在 table.columns(1).filter(function(value, index) 中打印 value 变量和 console.log(value) 时，它总是显示 Array [ 1 ]，所以任何知道为什么会这样。
@Kaow 是的，在我的例子中忘记了.filter() 之前的.data()，我的错^^，我更正了。
它仍然无法正常工作，表中没有任何变化。但现在我看到了value 变量的值。
我很好奇，是正确的字符串变量的值，它显示像这样Object { 0: (1) […], context: (1) […], length: 1, selector: {…}, tables: e(), table: e(), draw: e(), page: e(), ajax: {…}, rows: e(), … }
@Kaow 是的，我也觉得字符串变量不对，试试let string = $(this).val();