How can I add more buttons to (default/basic) datatabels buttons in same datatabels button location?

wdhasson123

I want to add new buttons for different functions by using (btn group.append), specifically. I want to add 2 new custom buttons to the basic buttons of DataTables. The new buttons should be in the same position and row as the basic buttons, and all buttons should be attached to each other. I want to specifically add a button to export the table as a PDF file because I have a table in Arabic language and unfortunately the makepdf library does not support Arabic at all. I want to customize one of the new buttons for this purpose. So please, I need help with that.
See my questions on stuckoverflow:
https://stackoverflow.com/questions/78023304/how-can-i-add-more-buttons-to-the-basic-default-datatables-buttons-in-the-same

The new buttons are:

<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button>

$(document).ready(function() {

  var table = $('#reminders').DataTable({

    //"dom": 'Blfrtip',

    "lengthMenu": [

      [50, 100, 1000, -1],

      [50, 100, 1000, "All"]

    ],

    "initComplete": function() {

      $("#reminders").show();

    },

    "buttons": ['copy', 'csv', 'excel', 'print']
initComplete: function (settings, json) {
            $(".dt-buttons .btn-group").append(
                '<a id="cv" class="btn btn-primary" href="#">CARD VIEW</a>'

      });
  table.buttons().container().appendTo('#reminders_wrapper .col-md-6:eq(0)');

});

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

You can add custom buttons as part of the initialisation, see example here : https://datatables.net/extensions/buttons/examples/initialisation/custom.html

As you want the existing buttons too, you can just add to your existing list by combining the code, so something like:

    "buttons": ['copy', 'csv', 'excel', 'print',
                {
                    text: 'My button',
                    action: function (e, dt, node, config) {
                        alert('Button activated');
                    }
                }
    ]

Colin

allan

I have a table in Arabic language and unfortunately the makepdf library does not support Arabic at all.

Have you tried using a custom font with the characters you need?

Allan

wdhasson123

@colin but how we can add bootstrap class to button ?

wdhasson123

@allan yes I'm tried , but the proplem still in the "dir" rtl not support at all

allan

Assuming you are loading the Bootstrap integration files for Buttons, the button will automatically get a suitable Bootstrap class. If that isn't working for you, please link to a test case showing the issue.

You can also set specific class names (e.g. btn-primary) for specific buttons using buttons.buttons.className.

Allan

wdhasson123

@allan in my case, how to append this bootstrap buttons to default dt btn group?
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button>

wdhasson123

@allan in my case, how to append this bootstrap buttons to default dt btn group?
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button>

wdhasson123

@allan there is no bootstrap class with name copyButton or excelButton

allan

there is no bootstrap class with name copyButton or excelButton

No - but there doesn't need to be does there? I add them per button to help if anyone wished to add some custom styling.

For your buttons:

      buttons: [
        {
          text: 'Success',
          className: 'btn-success',
          action: () => {
            // ...
          }
        },
        {
          text: 'Danger',
          className: 'btn-danger',
          action: () => {
            // ...
          }
        }
      ]

I don't know what you want your buttons to do, but that is one way of doing it: https://live.datatables.net/wogiriya/1/edit

Allan

wdhasson123

@allan what about pdfmake rtl support??

allan

pdfmake is not my project. You'd need to speak to them about it.

Allan