Pdf Icon in "Buttons" Extension

magolla

Hi!

(Sorry for my bad english)

I want put a pdf icon(.png) into the "pdf html5" export button but cant figure how do it.

I have this:

http://imgur.com/giwPva8

but i want exactly this:

http://imgur.com/zQYuVqf

Anyone can help me?

allan

What have you tried? Please link to a page showing it (per the forum rules). It should just be a case of adding a background image based on the class name.

Allan

magolla

Hi Allan!

Ty for response.

I start 1 week ago in a new job and yesterday they give me this task.

I can't sent the page because is in localhost(and i have low knowledge about servers).

In the proyect,they was using flash in datatables(with tabletools) for export table,but now they need change flash to HTML5.

So,i search and find that tabletools was retired.

I delete tabletools css/js and put buttons+htmlexport+jszip(for Excel)+pdfmake(for pdf,obviously) css/js.

Thats work really fine,but i cant add a image background in my pdf button.

Thats is my code:

$('#' + idTabla).DataTable( {
dom: 'Bfrtip',
"scrollX": true,
"scrollY": "500px",
"scrollCollapse": true,
buttons: [
{
extend:'pdfHtml5',
text: 'Pdf',

          },{

          extend:'excelHtml5',
          text:'Excel'
          }
          ],
        "columnDefs": [ {
        "targets": [ 0 , 1 ],
        "searchable": false,
        "orderable": false
        } , {
        "targets": 1,
        "searchable": false,
        "visible": false
     }]
});

Thank you for your patience!

allan

Okay - thanks. I would suggest using CSS to add a background image to the button. The class name you should target is buttons-pdf - see pdfHtml5.

Allan

magolla

Yeah! I do it!

I put a class name to excel button

extend:'excelHtml5',
text:'Excel',
title:'Bandeja_de_Notificaciones',
className: 'excelbtn'

and target in Css this way:

a.dt-button.excelbtn span
{
background: url(../img/excel.png) no-repeat center right;
}

Thats work really good!

Thanks you allan :)