FixedColumns data-* attributes

Cazz0r

Hey folks,

Been trying to get the data-* attributes working for fixed columns, but I can't figure the syntax out.

Turning on FixedColumns:
data-fixed-columns="true"
(actually works whenever data-fixed-columns is seen, despite whatever the value is set being incorrect)

However, I can't work out how to have 2 Left Columns via the data- attribute. I've tried:
data-fixed-columns="[ leftColumns:2 ]"
data-fixed-columns="[[ leftColumns:2 ]]"
data-fixed-columns="[{ leftColumns:2 }]"
data-fixed-columns="{ leftColumns:2 }"
data-fixed-columns="[ left-columns:2 ]"
data-fixed-columns="[[ left-columns:2 ]]"
data-fixed-columns="[{ left-columns:2 }]"
data-fixed-columns="{ left-columns:2 }"
data-fixed-columns-left-columns="2" (might not be obvious, but using this one doesn't enable FixedColumns, but I gave it a shot anyway, I also tried it alongside data-fixed-columns="true", but no success)

I'm wondering if it's even possible to set this setting via data- attributes? And if it is, what's the syntax?

Cheers,
Cazz0r

allan

Unfortunately it appears that jQuery changed how HTML5 data properties are parsed in 2.x+. It used to be possible using a -- to do nested objects, but not any more.

There is a SO thread on the topic here, with a link to a Select2 issue on the same topic.

You could use the method suggested in the SO thread to get the data parameters from the table element yourself and then pass them into DataTables.

Allan

Cazz0r

Ah right on! Thanks allan.

For those who may come across this in future, my solution was simply to check for (what should be the correct syntax, I believe), and alter the options prior to calling DataTable().

var MyOptions = {
    retrieve: true,
    "order": [[ 0, 'desc' ]],
    "drawCallback": function(){
        Bindings();
    }
};

if($("#backend-content-modal").find('.datatable').attr('data-fixed-columns--left-columns')){
    MyOptions.fixedColumns = { leftColumns: $("#backend-content-modal").find('.datatable').attr('data-fixed-columns--left-columns') };
}

table = $("#backend-content-modal").find('.datatable').DataTable(MyOptions);

Hopefully this helps somebody.