KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

How do you add an Id or className to CSV and Print buttons in datatables? #2159

Closed cfsinc opened this topic on on Jun 25, 2021 - 4 comments

cfsinc commented on Jun 25, 2021

Team,

I can add a className to pdf but if I try to do the same for Print and CSV it breaks the buttons.

How do I add an ID or a className to datagrid datatables buttons since it seems I can only call the button "print" and not an array of values?

lots of option for pdf and pretty much just title for CSV

If I try to assign even the title to print its broken.

I need some way of assigning ID and additional classNames to Print and CSV buttons. I can disable the buttons per user restrictions using CSS if I can add a button-disable classname to them based on permissions. I have it working great on the pdf button but not the CSV and Print button.

I welcome advise on adding the ID or classname or how I could disable the buttons with their default names. Also the print

    "options" => array(
                                    //dom layout Examples
                                // '<lf<t>ip>'
                                // '<"top"i>rt<"bottom"flp><"clear">'
                                // '<"wrapper"flipt>'
                                "dom" => Blfrtip, //layout buttons, search, Default Blfrtip
                                "buttons" => array( //"copy", "csv", "excel", "pdf", "print", "colvis"
                                    //"csv",
                                    array(
                                        "titleAttr"=>"CSV",
                                        "extend"=>"csvHtml5",
                                        //"text"=>'<i class="fa fa-file-text-o"></i>',
                                    ),
                                    array(
                                            "text"=>"PDF",
                                        "extend"=>"pdfHtml5",
                                        "orientation"=>"portrait",
                                        "pageSize"=>"LETTER",
                                        "className"=> $pdfClass,
                                        //"className"=>"btn-disable",
                                        //'text'=>'<i class="fa fa-file-pdf-o"></i>',
                                        //"titleAttr"=>"pdf",
                                        //"autoPrint"=>"true",
                                    ),
                                    //"print"
                                    array(
                                        "titleAttr"=>"Print",
cfsinc commented on Jun 25, 2021

here is the javascript version of how maybe I could do it but i dont know how to apply it?

https://datatables.net/extensions/buttons/examples/print/customisation.html

Sebastian Morales commented on Jun 25, 2021

Pls wrap the js function in double quotes like this:

      "options" => array(
                                "dom" => Blfrtip, //layout buttons, search, Default Blfrtip
                                "buttons" => array(
                                    array(
                                        "titleAttr"=>"Print",
                                        "extend"=>"print",
                                        "customize" => "
                function ( win ) {
                    $(win.document.body)
                        .css( 'font-size', '10pt' )
                        .prepend(
                            '<img src=\"http://datatables.net/media/images/logo-fade.png\" style=\"position:absolute; top:0; left:0;\" />'
                        );
 
                    $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'font-size', 'inherit' ); 
                }
                                        "
                                    ), 
cfsinc commented on Jun 25, 2021

thank you so much for the response. sorry for the ignorant mistake. Worked Great!!!

cfsinc commented on Jun 25, 2021

Thanks for the tip! I gave you one too! hahah

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed
solved

DataGrid