Way to combine custom html with control elements using Layout like you used to be able to with dom?

cbeesley

Using the dom option, you used to be able to add custom html and insert control elements within it.

Example:
$(document).ready( function () {
var table1 = $('#example').DataTable({
dom:"<'row' <'col-sm-12 col-md-2'l> <'col-md-8 col-sm-12 toolbar'> <'col-sm-12 col-md-2'f> >" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
});
});

Is this something like this still possible using the layout option?

I have seen examples where custom code is in separate section like "topStart" while "topEnd" has control element. This isn't what I'm looking to achieve.

allan

Is this something like this still possible using the layout option?

Not yet, but it will be in DataTables 2.1. I'm working on exactly this issue at the moment (after I've finished my support rounds ).

Allan

allan

While working on the layout option today I was looking at this specific example. With layout the above can be significantly simplified to be (with 2.1):

{
    topStart: null,
    topEnd: null,
    top: [
        'pageLength',
        {
            div: {
                className: 'toolbar'
            }
        },
        'search'
    ]
}

What you loose with that is the specific md and sm breakpoints - instead you are reliant on the built in CSS breakpoints. Flexbox is used, so I'm not sure that is too big an issue?

With 2.1 I'm currently thinking of this structure that would let you use those classes:

{
    top: [
        {
            rowClass: 'row',
            className: 'col-sm-12 col-md-2',
            features: ['pageLength']
        },
        {
            className: 'col-md-8 col-sm-12',
            features: [{
                div: {
                    className: 'toolbar'
                }
            }]
        },
        {
            className: 'col-sm-12 col-md-2',
            features: ['search']
        },
    ],
    bottom: [
        {
            rowClass: 'row',
            className: 'col-sm-12 col-md-5',
            features: ['info']
        },
        {
            className: 'col-sm-12 col-md-7',
            features: ['paging']
        }
    ],
    topStart: null,
    topEnd: null,
    bottomStart: null,
    bottomEnd: null
}

It is a lot more verbose that the dom option, but I think it is a lot more readable.

I've been puzzling over how I could simply it further, but drawing a blank just now.

Any thoughts would be welcome.

Allan

allan

Bit of a running development commentary that this thread has become, but I think the following is a bit nicer:

DataTable.ext.classes.grid.row = 'row';

layout: {
    top: [
        {
            className: 'col-sm-12 col-md-2',
            features: ['pageLength']
        },
        {
            className: 'col-md-8 col-sm-12',
            features: [{
                div: {
                    className: 'toolbar'
                }
            }]
        },
        {
            className: 'col-sm-12 col-md-2',
            features: ['search']
        },
    ],
    bottom: [
        {
            className: 'col-sm-12 col-md-5',
            features: ['info']
        },
        {
            className: 'col-sm-12 col-md-7',
            features: ['paging']
        }
    ],
    topStart: null,
    topEnd: null,
    bottomStart: null,
    bottomEnd: null
}

That uses a global class name to specify the class name for the rows, removing that duplication from the layout object (although that will still work, for completeness).

Not specifying the class names and using the grid layout (from Bootstrap in this case) would be nicer still, like in my second example above though .

Allan