Question

我想做的是在数据表中的搜索栏旁边添加一个单选按钮，以便仅按商店编号一列进行搜索。

我被称为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');
            }
        }]
    });

Answer 1

我相信，要在半途中显示单选按钮，真正具有挑战性的部分是禁用默认搜索栏，因为您不太可能会覆盖其默认行为（以搜索整个表）。 / p>

但是，您可以使用自己的自定义搜索栏，例如以下 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>

将元素追加到Datatable标头

1 个答案: