Customizing Buttons?

jLinux · July 2015

Im using DT to keep track of assets on a new application im using, I like the functionality behind all of the TableTools buttons (Copy,Print,Excel,CSV,PDF and the Select/Deselect All Rows), however I hate where they are at. How can I create links that use the same functionality? Short of doing something like using CSS to hide them and using jQuery to trigger clicks on the hidden links... lol

jLinux · July 2015

After some research and testing, I know i can initiate the buttons and add a little but of customization to them..

        var tableTools = new $.fn.dataTable.TableTools( table, {
            "sSwfPath": "/include/plugins/DataTables-1.10.7/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
            "sRowSelect": "multi",
            "aButtons": [
                {
                    "sExtends":    "text",
                    "sButtonText": 'Custom Button...',
                    "fnClick": function ( nButton, oConfig, oFlash ) {
                        alert( 'Mouse click' );
                        console.log('nButton: ', nButton);
                        console.log('oConfig: ', oConfig);
                        console.log('oFlash: ', oFlash);
                    },
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-primary m-r-5 m-b-5');
                    }
                },
                {
                    "sExtends":    "copy",
                    "sButtonText": 'COPY',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-primary m-r-5 m-b-5');
                    }
                },
                {
                    "sExtends":    "csv",
                    "sButtonText": 'CSV',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-primary m-r-5 m-b-5');
                    }
                },
                {
                    "sExtends":    "xls",
                    "sButtonText": 'XLS',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-primary m-r-5 m-b-5');
                    }
                },
                {
                    "sExtends":    "pdf",
                    "sButtonText": 'PDF',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-primary m-r-5 m-b-5');
                    }
                },
                {
                    "sExtends":    "print",
                    "sButtonText": 'PRINT',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-primary m-r-5 m-b-5');
                    }
                },
                {
                    "sExtends":    "select_all",
                    "sButtonText": 'Select All',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-primary m-r-5 m-b-5');
                    }
                },
                {
                    "sExtends":    "select_none",
                    "sButtonText": 'Deselect All',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-primary m-r-5 m-b-5');
                    }
                }
            ]
        } );

        $( tableTools.fnContainer() ).insertAfter('div#info');

Which works ok, but im trying to add a lot more style to them, (which involves more than just adding classes) and putting them into a side panel which I created..

Heres a screenshot of the results of the above, and where I need it to be (On the right)
http://d.pr/i/10wTF

P.S. The export buttons on the right panel dont work, those are what I want to get working somehow, via the Table Tools. I tried some hacks like..

$('.DTTT_button_xls').trigger('click');

and

$('#ToolTables_data-table_3').trigger('click');

With no avail.. Not that I liked that approach anyways

The HTML for the button format that im trying to achieve is..

<div class="btn-group">
                            <button class="btn btn-xs btn-primary p-5">CSV</button>
                            <button class="btn btn-xs btn-primary p-5">PDF</button>
                            <button class="btn btn-xs btn-primary p-5">Excel</button>
                            <button class="btn btn-xs btn-primary p-5">Print</button>
                        </div>

I tried placing the TableTools buttons in a div with the btn-group class, and adding "btn btn-primary" to them via the fnInit, but it doesnt work, im not sur eif its because the TableTools buttons are actually span tags inside a hyperlink or not

jLinux · July 2015

I seem to have figured it out.. Tweaked the DIV that the buttons are placed in, and heres the code for the datatables, incase anyone was curious.

        // Main reference for data-table
        var $data_table = $( '#data-table' );

        // Initialize DataTable
        var table = $data_table.DataTable( {
            "lengthMenu": [
                [5, 10, 15, 20, 25, 30, 40, 50, -1],
                [5, 10, 15, 20, 25, 30, 40, 50, "All"]
            ],
            "iDisplayLength": 10,
            "createdRow": function ( row, data, index ) {
                app.observable('assets.datatable.createrow', row, data, index);
            },
            dom: 'T<"clear">lfrtip',
            tableTools: {
                "sRowSelect": "multi",
                "aButtons": [] // Enable buttons, but dont show any (set below)
            }
        } );

        // The export buttons in the tool box
        var tableTools1 = new $.fn.dataTable.TableTools( table, {
            "sSwfPath": "/include/plugins/DataTables-1.10.7/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
            "sRowSelect": "multi",
            "aButtons": [
                {
                    "sExtends":    "copy",
                    "sButtonText": 'Copy',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-xs btn-primary p-5');
                    }
                },
                {
                    "sExtends":    "csv",
                    "sButtonText": 'CSV',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-xs btn-primary p-5');
                    }
                },
                /*{ // This just exports a CSV...
                    "sExtends":    "xls",
                    "sButtonText": 'XLS',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-xs btn-primary p-5');
                    }
                },*/
                {
                    "sExtends":    "pdf",
                    "sButtonText": 'PDF',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-xs btn-primary p-5');
                    }
                },
                {
                    "sExtends":    "print",
                    "sButtonText": 'Print',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-xs btn-primary p-5');
                    }
                }
            ]
        } );

        // The select all and deselect all buttons in the tools sidebar
        var tableTools2 = new $.fn.dataTable.TableTools( table, {
            "sSwfPath": "/include/plugins/DataTables-1.10.7/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
            "sRowSelect": "multi",
            "aButtons": [
                {
                    "sExtends":    "select_all",
                    "sButtonText": 'Select All',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-xs btn-primary p-6 m-b-3 p-l-8');
                    }
                },
                {
                    "sExtends":    "select_none",
                    "sButtonText": 'Deselect All',
                    "fnInit": function ( nButton, oConfig ) {
                        $(nButton).addClass('btn btn-xs btn-primary p-6 m-b-3');
                    }
                }
            ]
        } );

        // Add the buttons to the sidebar
        $( tableTools1.fnContainer() ).insertAfter('div#export-assets');
        $( tableTools2.fnContainer() ).insertAfter('span#select-assets');

jLinux · August 2015

Kinda moved the actual underlying issue here: http://datatables.net/forums/discussion/29188/tabletools-csv-pdf-xls-print-export-onclick-functionality

Customizing Buttons?

Customizing Buttons?

Answers

Howdy, Stranger!

Categories

DataTables

Customizing Buttons?

Customizing Buttons?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables