Jquery DataTables，彼此相邻的移动按钮

Question

我终于弄清楚了如何用按钮单击来重置过滤器，但是现在我想让所有3个按钮彼此相邻。

我试着调整dom，但是我的Clear Filters和Reset Columns按钮不在dom中。我是否必须重新配置我的清除过滤器和重置列按钮？

"dom": '<"top"i>rt<"bottom"flp><"clear">' 

的完整代码

<script> 
        $(document).ready(function() { 

         $('#everyonesTable tfoot th').each(function(i) { 
          var title = $('#everyonesTable thead th').eq($(this).index()).text(); 
          $(this).html('<input type="text" style="color:white!important;" placeholder="' + title + '" data-index="' + i + '" />'); 
         }); 

         // DataTable 
         var table = $('#everyonesTable').DataTable({ 


          colReorder:   true, 
          keys: true, 
          stateSave:   true, 
          "lengthMenu": [ 
           [10], 
           [10] 
          ], 

          scrollX:   true, 
          scrollCollapse:  true, 
          paging:    true, 
          fixedColumns:  true, 
          dom: 'Bfrtip', 

          buttons: [{ 
           "extend": 'colvis', 
           "collectionLayout": 'fixed four-column' 

          }], 
         }); 

         new $.fn.dataTable.Buttons(table, { 
          buttons: [{ 
            text: 'Clear Filters', 
            action: function(e, dt, node, config) { 



             $("[data-index='1']").val(''); 
             $("[data-index='2']").val(''); 
             $("[data-index='3']").val(''); 
             $("[data-index='4']").val(''); 
             $("[data-index='5']").val(''); 
             $("[data-index='6']").val(''); 
             $("[data-index='7']").val(''); 
             $("[data-index='8']").val(''); 
             $("[data-index='9']").val(''); 
             $("[data-index='10']").val(''); 
             $("[data-index='11']").val(''); 
             $("[data-index='12']").val(''); 
             $("[data-index='13']").val(''); 
             $("[data-index='14']").val(''); 
             $("[data-index='15']").val(''); 
             $("[data-index='16']").val(''); 
             $("[data-index='17']").val(''); 
             $("[data-index='18']").val(''); 
             $("[data-index='19']").val(''); 
             $("[data-index='20']").val(''); 
             $("[data-index='21']").val(''); 
             $("[data-index='22']").val(''); 
             $("[data-index='23']").val(''); 
             $("[data-index='24']").val(''); 
             $("[data-index='25']").val(''); 
             $("[data-index='26']").val(''); 
             $("[data-index='27']").val(''); 
             $("[data-index='28']").val(''); 
             $("[data-index='29']").val(''); 
             $("[data-index='30']").val(''); 
             $("[data-index='31']").val(''); 
             $("[data-index='32']").val(''); 
             $("[data-index='33']").val(''); 
             $("[data-index='34']").val(''); 
             $("[data-index='35']").val(''); 
             $("[data-index='36']").val(''); 
             $("[data-index='37']").val(''); 
             $("[data-index='38']").val(''); 
       table.search('').columns().search('').draw(); 


            } 
           }, 
           { 
            text: 'Reset Columns', 
            action: function(e, dt, node, config) { 
             table.colReorder.reset(); 


            } 
           } 
          ] 
         }); 

         table.buttons(1, null).container().appendTo(
          table.table().container() 
         ); 



             columnDefs: [{ 
              targets: 1, 
              render: function(data, type, row) { 
               return type === 'display' && data.length > 5 ? 
                data.substr(0, 5) + '…' : 
                data; 
              } 
             }] 



             $(table.table().container()).on('keyup', 'tfoot input', function() { 
              table 
               .column($(this).data('index')) 
               .search(this.value) 
               .draw(); 
             }); 




       }); 
       </script> 

Answer 1

您可以将所有的按钮添加到一个按钮，实例，而不是两个单独的构造两种不同的方式。为什么要摆在首位呢？

如果这不是一个选项，第二个按钮实例添加到第一：

table.buttons(1, null).container().appendTo($('.btn-group')) 

因为它是现在，你只是附加了“构造”按钮，实例的尽头dataTables容器。