Vfrdtyky

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.

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');

        }

    });



});

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