JSTree with Datatables

Question

I have two columns on a page, with a checkbox jstree on the left and a table using datatables on the right. The table rows and tree are all loaded at startup.

I would like to show a row when the node is selected on the tree and hide the row when its unchecked and I'm using a class for this. I am having problems with looping though all the rows in a datatables and setting a class, so I can filter it. This is the code I'm using below, but its not working. I can't get any id for the table row.

table.rows().iterator( 'row', function ( context, index ) {
                var tableNode = $(this.row(index).node());
                tableNode.removeClass('VisibleRow').removeClass('HiddenRow').addClass('HiddenRow');
            var id = tableNode.id;
            var treeNode = data.instance.get_node(id);

            if(treeNode != undefined){
                var currentId = '#row-' + node.id;
                var rowInTable =  table.row(currentId).node();
                $(rowInTable).removeClass("HiddenRow");
                $(rowInTable).addClass("VisibleRow");
            }

});

Let me know if there are better ways to do this.

Did you solve your problem? – Nikolay Ermakov Jan 27 '17 at 14:14 — Nikolay Ermakov, Jan 27 '17 at 14:14
thanks..this worked. I was able to modify and it worked. – james Makinde Feb 12 '17 at 04:26 — james Makinde, Feb 12 '17 at 04:26

score 0 · Accepted Answer · answered Jan 27 '17 at 03:16

I believe you can do it with the snippet below. The rows iteration is jQuery based, there is no DataTables-specific logic there.

Also check demo - Fiddle Demo

var $tableRows = $('#yourTableId').find('tr');

$('#yourTreeContainer').on('select_node.jstree', function(e, data) {

    $tableRows.each(function() {
        if (this.id === '#row-' + data.node.id) {
            $(this).removeClass('HiddenRow');
        } else {
            $(this).addClass('HiddenRow');
        }
    });

});

score 0 · Answer 2 · edited Jul 13 '18 at 23:03

I created same with some changes and it works fine, but even with hidden row I don't want datatable showing empty pages. Any advice, please?

this my code

$('#jstree')
  .jstree({
    core: {
      data: treeData
    },
    checkbox: {       
      three_state : false, // to avoid that fact that checking a node also check others
      whole_node : false,  // to avoid checking the box just clicking the node 
      tie_selection : false // for checking without selecting and selecting without checking
    },
    "plugins" : ["checkbox","conditionalselect"]
  })
  .on("check_node.jstree uncheck_node.jstree", function(e, data) {

   $tableRows.each(function(){  

   //$(this).addClass('HiddenRow'); //should not be there

     if( this.id === data.node.id ) {
       if(data.node.state.checked ){
         //alert("removeClass");
         $(this).removeClass('HiddenRow');
       }else{
         //alert("addClass");
         $(this).addClass('HiddenRow');
       };
     }else{

     }
   })
})

This is the link http://jsfiddle.net/cf7tata9/56/#&togetherjs=jqPTfx3gpk

JSTree with Datatables

2 Answers2