CODEWITHSUNDEEP
javascriptjquerycssdatatables
kingbon
kingbon

Reputation: 126

How can I remove DIV class dt-button of a dataTables button?

I am using Datatable with Button. I want to align the data tables button in other buttons . I tried this Code

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'));

this is my code in 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>

When i run in view source code..

    <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>

what i want to align the code

<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>

Upvotes: 1

Views: 2282

Answers (1)

kingbon
kingbon

Reputation: 126

Just added this 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?

Upvotes: 1

Related Questions