Добавить элемент в заголовок Datatable - PullRequest
Новая
       10

Добавить элемент в заголовок Datatable

0 голосов
/ 07 марта 2019

Я хотел бы добавить радиокнопку рядом с Строка поиска в моей таблице данных, чтобы разрешить поиск только по одному столбцу, Номер магазина .

Меня отослали в drawCallback, но я не верю, что это делает то, что я ожидаю. Все ответы, которые я нахожу, добавляют элементы к строкам / столбцам таблицы данных, но не сам заголовок.

Селектор для этого заголовка: #store-table_wrapper. 

   $('#store-table').DataTable({
        "columnDefs": [{
            "targets": [7, 8],
            "visible": false,
            "drawCallback": function() {
                $('<input type="radio" name="store-number-filter-selector" />').appendTo('#store-table_wrapper');
            }
        }]
    });

1 Ответ

0 голосов
/ 07 марта 2019

Я полагаю, что когда ваша радио-кнопка отображается на полпути, действительно сложная задача - отключить панель поиска по умолчанию, поскольку вы вряд ли измените ее поведение по умолчанию (для поиска по всей таблице).

Однако вы можете использовать собственную настраиваемую панель поиска, как показано ниже: DEMO : 

//define source data
const srcData = [
  {id: 1, name: 'apple', category: 'fruit'},
  {id: 2, name: 'raspberry', category: 'berry'},
  {id: 3, name: 'carrot', category: 'vegie'}
];
//define dataTable object
const dataTable = $('#mytable').DataTable({
  sDom: 't',
  data: srcData,
  columns: [
    {data: 'id', title: 'id'},
    {data: 'name', title: 'name'},
    {data: 'category', title: 'category'}
  ],
  //modify header nodes, by appending radios
  initComplete: function() {
    const table = this.api();
    [1,2].forEach(column => table.column(column).header().innerHTML += `<input type="radio" name="searchflag" value="${column}" class="searchflag"></input>`);
  }
});
//prevent sorting change upon radio click
$('input.searchflag').on('click', function(event) {
  //clear search upon choosing the other radio
  $('#searchfield').val('');
  dataTable.search('').columns().search('').draw();
  event.stopPropagation();
});
//searchbar keyup callback
$('#searchfield').on('keyup', function() {
  //grab checked radio button value or search the entire table by default
  let targetColumn = null;
  targetColumn = $('input.searchflag:checked').val();
  if(!targetColumn){
    dataTable.search($(this).val()).draw();
  }
  else {
    dataTable.column(targetColumn).search($(this).val()).draw();
  }
})
input.searchflag {
  float: left;
}
<!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>
  <script type="text/javascript" src="demo.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="searchfield"></input>
  <table id="mytable"></table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...