更新这是另一个例子,只需几行代码......警告会弹出两次!
$(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。我还需要隐藏几列......
我的思考过程就是这个......
定义一个javascript变量,我将其命名为 tb ,并将其指定为等于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 );
答案 0 :(得分:3)
我不确定为什么会这样。您的示例代码太长而无法阅读。
使用此Plunker作为进一步问题的基础,并删除所有无效代码的所有内容。
正如您所看到的Plunker一样。我确实向前迈出了一步,将点击更改为绑定并添加了一个unbind(只是为了安全起见,但脚本也可以在没有它的情况下工作)
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
//This is not realy necessary
$(nRow).unbind('click');
$(nRow).bind('click', function() {
alert ('clicked');
});
}
答案 1 :(得分:0)
我最终实现的解决方案是使用这个东西“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]);
...