尝试隐藏列时，jQuery DataTable会多次触发

Question

更新这是另一个例子，只需几行代码......警报弹出两次！

$(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
    });

---

我想要一个我可以点击的jQuery DataTable。 我还需要隐藏几列......

我的思考过程就是这个......

定义一个我调用tb的javascript变量，并将其赋值为jQuery $（'mytable'）。dataTable（...）; 然后去使用tb删除我不需要的列，方法调用如下... tb.fnSetColumnVis（0，false）;. 问题是，如果我这样做，我的onclick方法会被多次调用！ 所以我不得不对此进行评论，但现在我的所有专栏都可见了。

所以我需要一种方法来隐藏列并定义一个点击。

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

我不确定为什么会这样。 您的示例代码太长，无法阅读。

使用此Plunker作为进一步问题的基础，并删除所有无效的代码内容。

正如你所看到的Plunker一样。 我确实向前迈了一步，改变了点击绑定并添加了一个unbind（只是为了安全起见，但脚本也可以在没有它的情况下工作）

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

Answer 2

我最终实现的解决方案是使用这个东西“aoColumns”。 我对jQuery不了解的是我们如何能够像“aoColumns”和fnRowCallback一样用不同的语法抛出所有内容！ 它没有任何意义，也没有模式！

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

...