CODEWITHSUNDEEP
jqueryhtmlbuttondatatables
Armitage2k
Armitage2k

Reputation: 1254

jQuery Datatables - buttons

I am trying to apply datatables buttons to my existing table, but cannot seem to get this to work. The main issue is that following the examples on the official website (and even posts here on SE), most user seems to load the table content VIA datatables AJAX, unlike me where I am dealing with an existing, PHP + MySQLi generated table.

In short, how can I apply this code from the manual:

$(document).ready(function (){
    var table = $('#example').DataTable({
        dom: 'frtip',
        ajax: 'https://api.myjson.com/bins/qgcu',
        buttons: [
          {
             extend: 'collection',
             text: 'Export',
             buttons: [ 'pdfHtml5', 'csvHtml5', 'copyHtml5', 'excelHtml5' ]
          }
       ]
    });

    $('#btn-pdf').on('click', function(){
        table.button( '0-0' ).trigger();
    });

    $('#btn-csv').on('click', function(){
        table.button( '0-1' ).trigger();
    })

to my JavaScript and apply it to the existing #dmlog_table?

<script type="text/javascript" class="init">                            
  $('#dmlog_table').DataTable({
    "pagingType": "full_numbers",
    "lengthChange": false,
    "searching": true,
    "ordering": true,
    "order": [[ 0, "desc" ]],
    "info": true
  });
</script>

Upvotes: 0

Views: 979

Answers (1)

Offir
Offir

Reputation: 3491

I had the same problem like yours, I was dealing with an existing table as well. It's possible to take an existing table and give it the capabilities of DataTables.

For the button issue, I just took it from here but here is a Working DEMO.

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5'
    ]
} );

Make sure to include all the scripts.

Upvotes: 1

Related Questions