Datatables - Buttons Applying Custom Style with Icon (Bootstrap)

tomzn

Hi all,

I am using the datatables Buttons plugin to export to pdf. I am able to use custom styling to the button using the following code :

     "processing": true, // for show progress bar
        "serverSide": false, // for process server side
        "dom": '<"top"i>rt<"bottom"lp><"clear">',
        "scrollY": "500px",
        "buttons": [
            { "extend": 'pdf', "text":'Export',"className": 'btn btn-default btn-xs' }
        ],

and this code to append the button to a <span> :

      "initComplete": function() {
            oTable.buttons().container()
                .appendTo($('#btnPdf'));

However I am unable to find a way to use the bootstrap glyphicon with the button as I am using with my other input buttons as shown below :

    <button type="button" value="Search" id="btnSearch" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span>Search</button>
                                    <button type="button" value="Clear" id="btnClear" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-remove"></span>Clear</button>
                                    <span id="btnPdf"></span>

Has anyone done something similar using the buttons plugin and icons/bootstrap glyphicons ?

Thanks in advance.

SKC

See if the below mentioned code works :

initComplete: function () {
$('.buttons-pdf').html('<span class="glyphicon glyphicon-file" data-toggle="tooltip" title="Export To Excel"/>')
}

Place it in your
$('#YourTableID').Datatable()
For other default export buttons you can just change the class name (for e.g. '.buttons-excel' etc.)

albostami

Hi,

It is late reply... but I was looking for a solution and found your question.

replace the Export value with the <span>

{ "extend": 'pdf', "text":'Export',"className": 'btn btn-default btn-xs' }

it will be:

{ "extend": 'pdf', "text":'<span class="glyphicon glyphicon-pencil"></span>',"className": 'btn btn-default btn-xs' }

hope this helps you and folks.

sruthirbabu

Hai albostami. Iam trying the same thing but is it necessary to call bootstrap to implement this.Iam new to this