Custom Button

LarsMaelstrom

Hi,
first of all thx for your great work with this plugin.
i'm sorry if i open a new thread but i don't find any answer to this for the last release of DataTables.

I'm trying to add a button in the toolbar, my intent is to get a toolbar with the select results (10, 20, 50, 100) and a button that allows me to create a new record.

i've used ti

$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"toolbar">frtip'
} );

$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
} );

And this is my DataTables;

    $(document).ready(function() {
        var table = $('#tb_main_menu').DataTable({
            "ajax": '/scp/MenuDataGrid/',
            "processing": true,
            "iDisplayLength": 50,
            "sDom" : 'T<"clear ">lfrtip',
            "scrollY": "600px",
            "jQueryUI": true,
            "sPaginationType": "full_numbers",
            "scrollCollapse": true,
            "ordering": false,
            "info": true,
            "stateSave": true,
            "paging": true,
            "columnDefs": [
                {
                    "targets": 0,
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": 2,
                    "sClass": "center"
                },
                {
                    "targets": 3,
                    "sClass": "center"
                },
                {
                    "targets": 4,
                    "sClass": "center"
                },
                {
                    "targets": 5,
                    "orderable": false,
                    "sClass": "center",
                }
            ]
                    //------------------------------
        });

        $('#tb_main_menu tbody').on('dblclick', 'td', function() {
            var data = table.row($(this).parents('tr')).data();
            location.href = '/scp/menu/' + data[0] + '/edit/';
        }
        );
        $("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
    });

But nothing happens,
What am I doing wrong?

allan

$("div.toolbar")

You don't have a toolbar element. If you look at the example again:

$('#example').dataTable( { "dom": '<"toolbar">frtip' } );

You'll see that it adds a toolbar element. See the dom documentation for more information.

Regards,
Allan

LarsMaelstrom

Hi Allan ty for your reply.
There's a doc where i can see all the available elements of the toobar?

tangerine

It has no elements other than what you write yourself.

http://datatables.net/examples/advanced_init/dom_toolbar.html

"You could put whatever HTML you want into the toolbar...."

LarsMaelstrom

Ok but the selector that is default in top toolbar how i can insert inside of my toolbar?
the current code that i have is:

   $(document).ready(function() {
        var table = $('#tb_main_tag').DataTable({
            "ajax": '/scp/tagdatagrid/',
            "processing": true,
            "iDisplayLength": 50,
            "scrollY": "600px",
            "jQueryUI": true,
            "dom": '<"toolbar">frtip',
            "sPaginationType": "full_numbers",
            "scrollCollapse": true,
            "ordering": false,
            "info": true,
            "stateSave": true,
            "paging": true,
            "columnDefs": [
                {
                    "targets": 0,
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": 2,
                    "sClass": "center"
                },
                {
                    "targets": 3,
                    "sClass": "center"
                }
            ]
        });

        $('#tb_main_tag tbody').on('dblclick', 'td', function() {
            var data = table.row($(this).parents('tr')).data();
            location.href = '/scp/tag/' + data[0] + '/edit/';
        });
         $("div.toolbar").html('<button id="newTag" onclick="newTag()" >New</button>');
    });
    function newTag(){
        alert('NEW TAG');
    }

In this way i've successfully added a custom button but i've lost the default selector and the "smoothless" theme.

Some suggestion?

LarsMaelstrom

Ok after many changes i've used

"dom": '<"toolbar">lfrtip'

Now i've my button + select DisplayLength but the button is first than selectors result lenght... how i can add css smoothless and switch the elements position?