Datatables - поиск только по атрибуту данных

Question

Я искал в Интернете и на этом сайте нужную информацию, и многие из них обсуждают поиск данных, но они очень специфичны и не охватывают основы, которые мне нужны. Они не помогли мне найти решение моей проблемы.

У меня есть дата с пользовательским поиском ввода

К этому входу прикреплено событие, связывающее его с таблицей данных, и оно отлично работает:

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

На каждой и каждой tbody моей таблицы (даже пустых) я добавил атрибут «data-search» со значением, для которого я хочу, чтобы поиск выполнялся исключительно.

Вот скриншот консоли, показывающий этот факт:

Но это не работает, так как поиск по-прежнему выполняется по умолчанию на основе html-содержимого td.

Я точно знаю, потому что вот пример: в одном из моих td у меня есть что-то вроде " 2 m ² " (мощность отображается с помощью тега sup) внутри ячейки) во время поиска данных у меня есть простой текст " 2 м2 ".

Так что, если я введу в поле поиска " 2 m ", у меня совпадение, но если я введу " 2 m2 ", совпадение больше не будет. Таким образом, кажется совершенно ясным, что атрибут поиска данных мало что делает.

Вот моя конфигурация с данными по умолчанию:

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

Нужно ли мне что-то добавить к нему, чтобы отменить поиск по умолчанию и вместо этого настроить таргетинг на атрибут поиска данных?

Я прочитал эту страницу документации по датным таблицам 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 ».

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>