Question

我在网络和该网站上搜索了适当的信息，其中许多人讨论了数据搜索，但是它们非常具体，没有涵盖我所需的基础知识。他们没有帮助我找到解决问题的方法。

我有一个带有自定义搜索输入的数据表

此输入具有附加的事件，可将其连接到数据表，并且工作正常：

$('.search').keyup (function(){
    dataTable.search(this.value).draw();
});

在表的每个正文td （甚至是空的正文）上，我添加了一个“ data-search”属性，其值是我希望专门在其上进行的搜索。

以下是显示该事实的控制台屏幕截图：

但是它不起作用，因为默认情况下仍会根据td的html内容进行搜索。

我可以肯定地知道，因为这是一个例子：在我的某位运输工具中，我有类似“ 2 m ² ”的字样（力量以'sup '单元格内的'标签），而在进行数据搜索时，我会显示纯文本“ 2 m2 ”。

因此，如果我在搜索框中输入“ 2 m ”，那么我有一个匹配项，但是如果我键入“ 2 m2 ”，则没有匹配项了。因此，很显然data-search属性的作用不大。

这是我的默认datable配置：

dataTable = $('.table_x').DataTable({
    'bInfo'     : false,
    'paging'    : false,
    'scrollX'   : false,
    'processing': false,
    'sDom'      : 'ltipr',
    'order'     : [[0,"asc"]],
    'colReorder': {realtime:true},
    'data'      : dataSet,    //ajax import
    'columns'   : dataColumns //ajax import
});

是否需要添加一些内容以取消默认搜索并改为指定data-search属性？

我阅读了Jquery数据表文档的此页面，但似乎没有说应该添加任何内容，因此我被困住了： https://datatables.net/examples/advanced_init/html5-data-attributes.html

非常感谢您的帮助。

编辑：这是我在上面动态填充“ dataColumns”变量的方式：

// The columns are selected dynamically according to the user's preferences

function getTableData(){
    $.ajax({
        type    : 'GET',
        url     : 'get_table_data.php',
        data    : '...',
        datatype: 'json',
        async   : false,
        cache   : false
    })
    .done (function(response){
        dataSet = JSON.parse(response);
        $.each(dataSet[0], function(key, value)
        {   
            var my_item = {};
                my_item.data = key ;
                my_item.title = key ;
                dataColumns.push(my_item);
        }); 
    })    
}

编辑2：恰好是我根据获得的帮助添加的内容，但仍然不起作用：

dataTable = $('.table_x').DataTable({
    'bInfo'     : false,
    'paging'    : false,
    'scrollX'   : false,
    'processing': false,
    'sDom'      : 'ltipr',
    'order'     : [[0,"asc"]],
    'colReorder': {realtime:true},
    'data'      : dataSet,    //ajax import
    'columns'   : dataColumns //ajax import
});

$.fn.DataTable.ext.search.push((settings, row, index, rowData) => [...$(dataTable.row(index).node()).find('td')].map(td => $(td).attr('data-search')).some(tdAttr => tdAttr.includes($('#search').val().toLowerCase())))

有了这个：没有错误，但是如果我输入“ 2 m ”，则在数据搜索和td单元格都以“ 2 m < / strong>”。

Answer 1

您需要使用自定义搜索功能$.fn.DataTable.ext.search，如下所示：

//source data (assuming your search attribute is part of a source data model)
const srcData = [
  {id: 1, name: 'apple', tag: 'fruit'},
  {id: 2, name: 'banana', tag: 'fruit'},
  {id: 3, name: 'carrot', tag: 'vegie'},
  {id: 4, name: 'goosberry', tag: 'berry'},
  {id: 5, name: 'raspberry', tag: 'berry'}
];
//datatables initialization rendering each <td> with the attribute 'data-search'
const dataTable = $('#mytable').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {title: 'id', data: 'id', createdCell: (td, cellData, rowData, row, col) => {
      $(td).attr('data-search', ['one', 'two', 'three', 'four', 'five'][rowData.id-1]);
    }},
    {title: 'name', data: 'name', createdCell: (td, cellData, rowData, row, col) => {
      $(td).attr('data-search', rowData.tag);
    }}
  ]
})
//custom search across 'data-search' attributes of all cells
$.fn.DataTable.ext.search.push((settings, row, index, rowData) => [...$(dataTable.row(index).node()).find('td')].map(td => $(td).attr('data-search')).some(tdAttr => tdAttr.includes($('#search').val().toLowerCase())) || $('#search').val() == '')
//redraw table upon search 'keyup'
$('#search').on('keyup', () => dataTable.draw());

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<input id="search"></input>
<table id="mytable"></table>
</body>
</html>

数据表-仅搜索数据属性

1 个答案: