jQuery DataTable firing multiple times while trying to hide columns

Question

Update Here is another example, just a few lines of code... the alert pops up twice!

$(document).ready( function () 
    {
        var x = $('#example').dataTable(
        {
            fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) 
            {
                // Row click
                    $(nRow).on('click', function() 
                {
                    alert(aData);
                        console.log('Row Clicked. Look I have access to all params, thank You closures.', this, aData, iDisplayIndex, iDisplayIndexFull);
                    });
            }
        }); 

        x.fnSetColumnVis( 0, false ); //This line of code causes the click to be called twice
    });

---

I am trying to have a jQuery DataTable that I can click. I also need to hide a few columns...

My thought process was this...

Define a javascript variable which I called tb and assign it equal to the jQuery $('mytable').dataTable(...); and then go and use tb to remove the columns I don't need with a method call like this... tb.fnSetColumnVis( 0, false );. The problem is, if I do that, my onclick method gets called multiple times! So I had to comment that out, but now all my columns are visible.

So I need a way to hide columns and also define a click.

var tb = $('#myrecords-table-table').dataTable(
{

    fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) 
    {
        // Row click
        $(nRow).on('click', function() 
        {
                $( "#tabsright" ).tabs({ active : 0 });
                $("#newrecordform").show();
                $("#nr_name").val(aData[2]);
                $("#create_ri_reportid").val(aData[0]);

                //Update summary field
                getSummary(aData);

                var i;
                var select = document.getElementById("nr_s_actors");
                for(i=0;i<select.options.length;i++)
                {
                    select.options[i].selected=false;
                }


                $("#nr_s_actors").multiselect("refresh");
                 //Get the actors that are selected
                 $.ajax(
                 { 
                    url: 'phpscripts/getreportrelations.php', 
                    data: 'reportid=' + aData[0], 
                    dataType: 'json', 
                    success: function(data) 
                    {               
                        $.each(data,function(index,value)
                        {
                                var id="id_actor_"+value[0];                                    
                                document.getElementById(id).selected = true;                                                        
                                $("#nr_s_actors").multiselect("refresh");
                        });
                    },
                    error: function (header, status, error) 
                    {
                        console.log('ajax answer post returned error ' + header + ' ' + status + ' ' + error);
                    }
                });


                //TODO find out why this is being called multiple times. Most likely because jQuery script is being included multiple times
                //TODO find out how to clear the screen
                 $.ajax(
                 { 
                    url: 'phpscripts/getreportinstances.php', 
                    data: 'reportid=' + aData[0], 
                    dataType: 'json', 
                    success: function(data) 
                    {       
                        /*while(document.getElementById("current_ris_div").firstNode())
                        {
                            document.getElementById("current_ris_div").removeChild(document.getElementById("current_ris_div"));
                        }*/

                        for(var y in data)
                        {
                            console.log(data[y],"is the y in data");
                            var element = document.createElement("DIV");
                            element.name = "reportinstance_"+y;
                            element.id = "reportinstance_"+y;
                            element.innerHTML = data[y]['summary']+"<br/>";
                            element.innerHTML = element.innerHTML + data[y]['location']+"<br/>";
                            element.innerHTML = element.innerHTML + data[y]['summary']+"<br/>";
                            for(var x in data[y]['people'])
                            {
                                element.innerHTML = element.innerHTML + data[y]['people'][x] +"<br/>";
                            }
                            for(var x in data[y]['behavior'])
                            {
                                element.innerHTML = element.innerHTML + data[y]['behavior'][x] +"<br/>";
                            }
                            for(var x in data[y]['media'])
                            {
                                element.innerHTML = element.innerHTML + "<image src=\""+data[y]['media'][x] +"\"/><br/>";
                            }


                            document.getElementById("current_ris_div").appendChild(element);
                        }




                        /*$.each(data,function(index,value)
                        {
                                console.log(data);
                                var element = document.createElement("DIV");
                                element.name = "reportinstance_"+index;
                                element.id = "reportinstance_"+index;
                                element.innerHTML = value['summary']+"<br/>";
                                element.innerHTML = element.innerHTML + value['location']+"<br/>";
                                element.innerHTML = element.innerHTML + value['summary']+"<br/>";
                                for(var x in value['people'])
                                {
                                    element.innerHTML = element.innerHTML + value['people'][x] +"<br/>";
                                }
                                for(var x in value['behavior'])
                                {
                                    element.innerHTML = element.innerHTML + value['behavior'][x] +"<br/>";
                                }
                                for(var x in value['media'])
                                {
                                    element.innerHTML = element.innerHTML + "<image src=\""+value['media'][x] +"\"/><br/>";
                                }


                                document.getElementById("current_ris_div").appendChild(element);    
                        });*/
                    },
                    error: function (header, status, error) 
                    {
                        console.log('ajax answer post returned error ' + header + ' ' + status + ' ' + error);
                    }
                });

                //Now set the media type
                var ii;
                var selecti = document.getElementById("nr_s_mediatypes");
                for(ii=0;ii<selecti.options.length;ii++)
                {
                    selecti.options[ii].selected=false;
                }
                console.log("What index should I use", aData);
                var iidd = "id_mediatype_"+aData[4];
                console.log(iidd);
                document.getElementById(iidd).selected = true;
                $("#nr_s_mediatypes").multiselect("refresh");

        });
    }
}); 
//tb.fnSetColumnVis( 0, false );
//tb.fnSetColumnVis( 1, false );
//tb.fnSetColumnVis( 4, false );

Answer 1

The solution I ended up implementing was using this thing "aoColumns". What I don't understand about jQuery is how we can just thrown things in like "aoColumns" and fnRowCallback all with different syntax! It doesn't make any sense and there are no patterns!

 var tb = $('#myrecords-table-table').dataTable(
{
    "aoColumns":
    [
        {"bVisible":false},
        {"bVisible":false},
        null,
        null,
        null

    ],  

    fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) 
    {
        // Row click
        $(nRow).on('click', function() 
        {
                $( "#tabsright" ).tabs({ active : 0 });
                $("#newrecordform").show();
                $("#nr_name").val(aData[2]);
                $("#create_ri_reportid").val(aData[0]);

...

Answer 2

I am not sure why this is happening. Your example code is way too long to read.

Use this Plunker as a base for further questions and drop out all of the stuff of your code that does nothing.

As you can see the Plunker works. I did go a step ahead and changed click to bind and also added an unbind (just to be on the safe side, but the script works without it, too)

fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
  //This is not realy necessary
  $(nRow).unbind('click');
  $(nRow).bind('click', function() {
    alert ('clicked');
  });
}