Troubles with using layout

BeSt79

Hi there.

My name is Benjamin.

I have this DataTables init-call:

var dt = $('#op').DataTable({
            destroy: true,
            "order": [
                [0, "asc"],
                [1, "asc"]
            ],
            "lengthMenu": [
                [10, 15, 30, 50],
                [10, 15, 30, 50]
            ],
            "pagingType": "full_numbers",
            "scrollResize": true,
            "scrollY": scrollHeight,
            "bScrollCollapse": false,
            "autoWidth": true,
            "stateSave": false,
            layout: {
                top2Start: 'pageLength',
                top2End: 'search',
                topStart: function() {
                    let toolbar = document.createElement('div');
                    toolbar.innerHTML = '<b>Custom tool bar! Text/images etc.</b>';
                    return toolbar;
                },
                topEnd: null,
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            "processing": true,
            "serverSide": true,
            "ajax": "PHPfile.php",
            "columnDefs": [{
                    "targets": 'nosort',
                    "orderable": false
                },
                {
                    "targets": 'nosearch',
                    "searchable": false
                },
            ],
            "select": false,
            "columns": columnArray
        });

The result is correctly dsplayed:

But I want the "custom tool bar" to be full-width. So I change the layout to:

layout: {
                top2Start: 'pageLength',
                top2End: 'search',
                top: function() {
                    let toolbar = document.createElement('div');
                    toolbar.innerHTML = '<b>Custom tool bar! Text/images etc.</b>';
                    return toolbar;
                },
                bottomStart: 'info',
                bottomEnd: 'paging'
            },

But then the pageLength and search fields gets doubled:

Can anybody help me in finding the error?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The default is:

{
    topStart: 'pageLength',
    topEnd: 'search',
    bottomStart: 'info',
    bottomEnd: 'paging'
}

If you don't want the default search and page length to appear, you need to set them to null:

layout: {
    top2Start: 'pageLength',
    top2End: 'search',
    topStart: null,
    topEnd: null,
    top: function() {
        let toolbar = document.createElement('div');
        toolbar.innerHTML = '<b>Custom tool bar! Text/images etc.</b>';
        return toolbar;
    },
    bottomStart: 'info',
    bottomEnd: 'paging'
},

Allan

BeSt79

Awesome. Thank you.