Datatables - Buttons Applying Custom Style with Icon (Bootstrap)

Datatables - Buttons Applying Custom Style with Icon (Bootstrap)

tomzntomzn Posts: 29Questions: 9Answers: 2

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() {

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.


  • SKCSKC Posts: 33Questions: 10Answers: 0
    edited December 2016

    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
    For other default export buttons you can just change the class name (for e.g. '.buttons-excel' etc.)

  • albostamialbostami Posts: 2Questions: 0Answers: 0


    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.

  • sruthirbabusruthirbabu Posts: 6Questions: 2Answers: 0

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

Sign In or Register to comment.