columnDef and HTML5 data-attributes

columnDef and HTML5 data-attributes

klobetimeklobetime Posts: 1Questions: 1Answers: 0

I don't want most of my columns to be searchable, so I make that the default for all my data tables:

$.extend($.fn.dataTable.defaults, {
    processing: true,
    serverSide: true,
    ajax: '#',
    columnDefs: [
        {
            targets: '_all',
            searchable: false
        }
    ]
});

Then, where I want a searchable column, I'd like to do this:

      <th data-name="number" data-searchable="true">Number</th>

However, it seems that this won't override what is set in columnDefs -- searchable stubbornly remains set to false in the ajax callback. If I use JavaScript rather than HTML5 data-* attributes to configure the table the searchable column works as desired, but I really like having the configuration right there in the HTML with the rest of the table definition.

Am I missing something, or is this by design?

Thanks!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,726Questions: 1Answers: 10,109 Site admin
    Answer ✓

    Option 3 - its a bug (I think!). The HTML5 attributes should really overrule the columnDefs options, but that isn't happening at the moment I'm afraid. What happening is that the column gets added with the parameters from the attributes.

    Then the columnDefs get added. Then columns options get added.

    So the attributes are currently the lowest of the pile. Thinking about it that is counter intuitive. Perhaps it was what I had intended at the time (thinking that Javascript should always overrule the attributes) but that's redundant in the case of _all.

    This probably isn't something that I'm going to change in the 1.10.x series as it might be that there are developers to depend upon this current sequence. But I've made a note to look into it for the next major version.

    Until then, Javascript options are the way to go for overruling _all.

    Allan

  • ZanoZikZanoZik Posts: 1Questions: 0Answers: 0
    edited December 2018

    So how do I go about it, if I don't have anything defined in my initial javascript init and just want to make some columns searchable=false?

    <th data-sortable="false" data-searchable="false">Balance</th>
    

    Column is still searchable (but not sortable).

  • colincolin Posts: 15,144Questions: 1Answers: 2,586

    Hi @ZanoZik ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

This discussion has been closed.