Question

我正在使用带按钮的数据表。我想在其他按钮中对齐数据表按钮。我尝试过此代码

var table = $('#example1').DataTable();



var buttons = new $.fn.dataTable.Buttons(table, {
       buttons: [
            {
                extend: 'csvHtml5',
                text:      '<span class="fa fa-download"></span> &nbsp;CSV',
                className: "btn btn-default btn-sm"
            },
            {
                extend: 'pdfHtml5',
                text:      '<span class="fa fa-print"></span> &nbsp;Print',
                className: "btn btn-default btn-sm",
                titleAttr: 'Print',
                download: 'open',
                exportOptions: {
                    columns: [ 0, 1, 2, 3,4, 5, 6, 7, 8 ]
                },
                orientation: 'landscape',
                pageSize: 'A4'
            },

      ]
  }).container().appendTo($('#buttons'));

这是我的html代码

<span class="new-button"><a href="{{url('admin/vehicles/create')}}" class="btn btn-success btn-sm"><span class="fa fa-plus"></span> &nbsp;Add New</a></span>
<div id="buttons"> </div>

当我在视图源代码中运行时。.

    <span class="new-button"><a href="#" class="btn btn-success btn-sm"><span class="fa fa-plus"></span> &nbsp;Add New</a></span>
<div id="buttons">
    <div class="dt-buttons">
        <button class="dt-button buttons-csv buttons-html5 btn btn-default btn-sm" tabindex="0" aria-controls="example1" type="button">
        <span><span class="fa fa-download"></span> &nbsp;CSV</span></button> 
        <button class="dt-button buttons-pdf buttons-html5 btn btn-default btn-sm" tabindex="0" aria-controls="example1" type="button" title="Print"><span><span class="fa fa-print"></span> &nbsp;Print</span></button> 
    </div>
</div>

我想对齐代码

<span class="new-button"><a href="#" class="btn btn-success btn-sm"><span class="fa fa-plus"></span> &nbsp;Add New</a></span>
<div id="buttons">
        <button class="dt-button buttons-csv buttons-html5 btn btn-default btn-sm" tabindex="0" aria-controls="example1" type="button">
        <span><span class="fa fa-download"></span> &nbsp;CSV</span></button> 
        <button class="dt-button buttons-pdf buttons-html5 btn btn-default btn-sm" tabindex="0" aria-controls="example1" type="button" title="Print"><span><span class="fa fa-print"></span> &nbsp;Print</span></button> 
</div>

Answer 1

只需添加此jQuery

var cnt = $(".dt-buttons").contents();

$(".dt-buttons").replaceWith(cnt);
  var cnta = $("#buttons").contents();
  $("#buttons").replaceWith(cnta);

How to remove only the parent element and not its child elements in JavaScript?

如何删除dataTables按钮的DIV类dt按钮？

1 个答案: