Upgrade from tableTools to Buttons extensions

Upgrade from tableTools to Buttons extensions

okocaturkokocaturk Posts: 2Questions: 1Answers: 0

Hi,

How can I adapt TableTools's following custom print button click event to print button event of new buttons extension ?

Regards.

$(document).ready( function () {
    $('#example').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "aButtons": [
                {
                    "sExtends": "text",
                    "fnClick": function( nButton, oConfig ) {
                        this.fnPrint( true, oConfig );
                    }
                }
            ]
        }
    } );
} );

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    What version of Datatables are you using?

    If you are using 1.9 then the buttons extension won't work for you. You will need to upgrade to 1.10. Preferably the latest available.

    If you have 1.10 then you can review the examples here:
    https://datatables.net/extensions/buttons/examples/

    The docs are here:
    https://datatables.net/extensions/buttons/

    Kevin

  • okocaturkokocaturk Posts: 2Questions: 1Answers: 0
    edited September 2017

    Hi Dear Kevin,
    Thank you for your help but actually I want make custom print preview for my print button.
    Actually I want adapting my following custom print preview function of TableTools to new Buttons extension but when I change "fnClick" with "customize", "fnPrint" function return error.
    So, I did not find the function to replace the fnPrint function in the new button extension.

    My old print button's custom print preview setting parts as below.

    Note: Please ignore my custom definitions in this code.
    By the way, I using latest versions of DataTables and Buttons extensions.

    Best Regards.

                        .....
                        .....
                        sExtends: "print",
                        sButtonText: "Print",
                        sToolTip: "Please push ESC key to back previous page",
                        fnClick: function (oConfig) {
                            //hide invisible columns during print preview
                            for (var index in initialSettings.invisibleColumns) {
                                oTable.fnSetColumnVis(initialSettings.invisibleColumns[index], false);
                            }
    
                            $("html").addClass('prt-prev');
    
                            $(".thin-scroll-page").addClass("prt-prev");
                            this.fnPrint(true, oConfig);
                            $(window).keydown(function (e) {
                                //exit print preview when end user push to ESC key;
                                if (e.which === 27) {
                                    //show columns again which has hidden during print preview
                                    for (var index in initialSettings.invisibleColumns) {
                                        oTable.fnSetColumnVis(initialSettings.invisibleColumns[index], true);
                                    }
                                    $(".prt-prev").removeClass("prt-prev");
                                    setPageIsScrollable();
                                    $(".dataTables_processing").hide();
                                }
                            });
                        }
    
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    Sounds like you want to create a custom button instead of using the built in print button.

    Does the custom button work for you?

    Kevin

This discussion has been closed.