jquery DataTables buttons

Question

I'm having trouble creating custom buttons and editing the buttons.dom.button properties. Here is the code that I'm using;

$(document).ready(function() {

function buildTable(tableName) {
   return $('#'+tableName).DataTable( {
        dom: 'ifrt',
        paging: false,
        lengthChange: true,
        responsive: true,
        columnDefs: [
            {
                "targets": [ 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 ],
                "visible": false,
                "searchable": false
            },
            { 
                "orderable": false, 
                "targets": [0, 3, 4, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22] 
            }           
        ],

        buttons: [

            'excel',
            {
                extend: 'columnToggle',
                columns: 0,
                text: 'show/hide pics'
            }            
        ],

        buttons: {
           dom: {
              button:{
                 tag: 'li'
              }

           }
        }


    });
}

var tablesMen = buildTable('menTable');

$('#menTable_wrapper').prepend('<div class="dropdown"><button class=btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">dropdown<span class="caret"></span></button><ul class="dropdown-menu"></ul></div>');

tablesMen.buttons().container().appendTo($('.dropdown-menu'));

The buttons get reset to default (excel, pdf, copy, etc.) when I add the

buttons: {
           dom: {
              button:{
                 tag: 'li'
              }

           }
        }

I hope that makes sense.

Mark Schultheiss · Accepted Answer · 2016-03-25 21:43:50Z

1

You have an array called "buttons" declared with

buttons: [ then immediately replace it with the object buttons: {

EDIT2: Here is your function where I modified it to include the dom attribute as well as added a custom button as an example:

  function buildTable(tableName) {
    return $('#' + tableName).DataTable({
      dom: 'Bfrtip',
      paging: false,
      lengthChange: true,
      responsive: true,
      columnDefs: [{
        "targets": [1, 2, 3],
        "visible": true,
        "searchable": false
      }, {
        "orderable": false,
        "targets": [0, 4, 5]
      }],
      buttons: {
        dom: {
          button: {
            tag: 'li'
          }
        },
        buttons: [{
          text: 'My button',
          action: function(e, dt, node, config) {
            alert('Button activated');
          }
        }, {
          extend: 'excel',
          text: 'Save current page',
          exportOptions: {
            modifier: {
              page: 'current'
            }
          }
        }]
      }
    });
  }

EDIT: Note you are also missing quotes in the string, here is the corrected:

$('#menTable_wrapper').prepend('<div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">dropdown<span class="caret"></span></button><ul class="dropdown-menu"></ul></div>');

edited Mar 25, 2016 at 21:43

answered Mar 25, 2016 at 19:43

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

f3lix 3rown Over a year ago

Fantastic! Some of the DataTables documentation leaves a little something to be desired.

Collectives™ on Stack Overflow

jquery DataTables buttons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related