Columns filtering and custom DOM

NoBullMan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown: None
Description of problem:
I added column filtering and set it up in "initComplete" section. I also defined a div that contains a drop down list to allow users to filter based on one column.

The problem I am facing is one or the other shows up depending on how I declare the datatable.
If I add the declaration in a function, say "bindMyDatatable()" and call it in document.ready portion, then column filtering appears but drop down won't. If I remove the function name and just declare the data table definition, then drop down (custom DOM) appears but column filtering won't. Not sure how to fix it.

$(documet).ready(function(){
    ...
    $("div.toolbar").html('markup for drop down');
    // setup column filtering
    $('#MyTable thead tr')
        .clone(true)
        .addClass('filters').
        .appendTo('#MyTable thead');

    bindMyTable();
    ...
});

function bindMyTable(){
    tblMyTable = $("MyTable").DataTable({
        ...
        dom:<'row'<col-md-2' l><'col-md-2'<\"toolbar\">><...>>";
        ...
        initCompleter: function(){
            ...
        }
   });

This shows column filtering but not drop down in custom DOM.

If I comment out bindMyTable in document.ready, and remove "function bindMyTable(){" and just leave table definition, then custom DOM appears but column filtering won't.

kthorngren

The only thing I see is you have initCompleter instead of initComplete. Suspect its a typo. Otherwise I see nothing obvious in your code snippet. Maybe look at the browser's console for errors.

Please build a simple test case showing the issue so we can see exactly what you have to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

Thinking about it you need to create the toolbar element after the Datatables initialization. The dom option will insert the div with the class toolbar into the document. Then $("div.toolbar").html(...) will update the inserted HTML. For example:

$(documet).ready(function(){
    ...
    // setup column filtering
    $('#MyTable thead tr')
        .clone(true)
        .addClass('filters').
        .appendTo('#MyTable thead');
 
    bindMyTable();

    ...
});
 
function bindMyTable(){
    tblMyTable = $("MyTable").DataTable({
        ...
        dom:<'row'<col-md-2' l><'col-md-2'<\"toolbar\">><...>>";
        ...
        initCompleter: function(){
            ...
        }
   });

   $("div.toolbar").html('markup for drop down');

If this doesn't help then please provide a test case.

Kevin

NoBullMan

Thank you Kevin
This didn't work but pointed me in the right direction.

I added the div at the end of initComplete, followed by a call to a function that populated the drop down and it worked.
Thank you for your quick response.