Customizing Buttons?

jLinux

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

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

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

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