使用 Bootstrap 5 将文件导出按钮移动或添加到数据表中的分页按钮行？

Question

数据表在 Bootstrap 5 主题中工作得很好，分页和 file export 功能运行良好，但文件导出按钮与主题不匹配，我希望它不显眼地放在同一行中作为分页按钮。

页面简化：

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css">

<title>filename</title>
  <table id="myTable" class="display" style="width:100%">
    <thead><tr><th>Name</th><th>Position</th></tr></thead>
    <tbody>
        <tr><td>Tiger Nixon</td><td>System Architect</td></tr>
        <tr><td>Garrett Winters</td><td>Accountant</td></tr>
        <tr><td>Ashton Cox</td><td>Junior Technical Author</td></tr>
        <tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td></tr>
        <tr><td>Airi Satou</td><td>Accountant</td></tr>
</table>

<script>
$(document).ready(function() {
  $('#myTable').DataTable( {
    dom: 'Bfrtip',buttons: ['csv'],pageLength: 2,
} );} );
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
</html>

Bootstrap 5 Buttons and Button Groups 看起来很棒，所以我们可以隐藏 Datatables 的分页按钮并将其他按钮绑定到它们，但我不知道我们如何管理不同数量的按钮。

我认为最简单的方法可能是将另一个按钮附加到分页行，但这并没有按预期创建按钮：

var node = document.createElement("LI");                  
node.className = "paginate_button page-item " 
var textnode = document.createTextNode("Water");                             
document.querySelector(".pagination").appendChild(node);

.

我做错了什么？有什么简单的方法可以将按钮添加到分页按钮行，然后将其绑定到其他东西？

Answer 1

想通了。将其附加到 .pagination class:

var append_li = '<li class="paginate_button json_button" id="json_button"><a aria-controls="myTable" class="page-link">JSON</a></li>';
$('.pagination').append(append_li); 
$('.json_button').click(function() { $('.dt-button').trigger('click');}); // bind new btn to file export btn
$('.dt-buttons').hide(); // hide file export btn

使用导航按钮时，table 会重绘，因此在单击按钮时重复此操作：

$('#myTable').on('draw.dt', function () { // when the table is redrawn the export btn must be readded and rebound to hidden export btn
    $('.pagination').append(append_li);
    $('.json_button').click(function() { $('.dt-button').trigger('click');});
                                         });

使用 Bootstrap 5 将文件导出按钮移动或添加到数据表中的分页按钮行？

Moving or adding file export button to row of pagination buttons in Datatables with Bootstrap 5?

javascript

datatables

bootstrap-5