gpt4 book ai didi

Jquery 数据表 - 所选行突出显示在第二页中不起作用

转载 作者:行者123 更新时间:2023-12-01 06:22:43 25 4
gpt4 key购买 nike

我的数据表中有分页,并且我实现了选定的行突出显示功能...此功能(行突出显示)在第一页中工作,但第二页和第三页不起作用。

我已经更新了jsfiddle中的代码,请查看advise。

var oTable = $("#products").dataTable({
"aaData": [
["one", "two", "three", "four"],
["five", "six", "seven","eight"],
["one", "two", "three", "four"],
["one", "two", "three", "four"],
["one", "two", "three", "four"],
["one", "two", "three", "four"],
["one", "two", "three", "four"]

],
"bProcessing": true,
"bDeferRender": true,
"bFilter": false,
"bJQueryUI": true,
"sPaginationType": "two_button",
"sDom": '<"H"Tfr>t<"F"ip>',
"bRetrieve": true,
"bPaginate": true,
"bSort": true,
"aaSorting": [
[4, "desc"]
],
"iDisplayLength": 5,
"aoColumns": [{
"sWidth": "70%",
"sClass": "center",
"bSortable": false
}, {
"sWidth": "70%",
"sClass": "center",
"bSortable": false
}, {
"sWidth": "70%",
"sClass": "center",
"bSortable": false
}, {
"sWidth": "70%",
"sClass": "center",
"bSortable": false
}, ],
"aoColumnDefs": [{
"fnRender": function (o, val) {

return o.aData[0];
},
"sClass": "prodNbr first",
"aTargets": [0]
}, {
"fnRender": function (o, val) {

return o.aData[1];
},
"sClass": "Description",
"aTargets": [1]
}, {
"fnRender": function (o, val) {

return o.aData[2];
},
"sClass": "Partid",
"aTargets": [2]
}, {
"fnRender": function (o, val) {

return o.aData[3];
},
"sClass": "Description",
"aTargets": [3]
}]

});


$('#products tbody tr').click(function () {
if ($(this).hasClass('selected')) $(this).removeClass('selected');
else
{
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}
});

JSFIDDLE

最佳答案

为什么你的方法不起作用

你的原因click事件没有发生,因为 tr s 是动态创建的。 click事件仅附加到已存在的元素,而不附加到稍后添加的元素。

解决方案

所以我建议你使用livedelegate绑定(bind)click事件到tr s。

$('body').delegate('#products tbody tr', "click", function () {
if ($(this).hasClass('selected')) $(this).removeClass('selected');
else {
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}
});

我们将其绑定(bind)到 <body> 的原因是因为它会一直存在,并且您的事件将被委托(delegate)给 tr从那里开始。

额外内容

如果您使用的是更高版本的 jQuery(您必须),建议使用 on ,

$('body').on("click", '#products tbody tr' ,function () {
//your code
});

有关所用方法的更多信息

<强> delegate

  • 文档:http://api.jquery.com/delegate/
  • 它的作用:根据一组特定的根元素,将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件。

<强> on

演示

编辑

另一种方法是使用 live() (因为您使用的是 jQuery 1.6)。这将确保click绑定(bind)到所有元素。 (甚至是动态的)

$('#products tbody tr').live("click", function () {
if ($(this).hasClass('selected')) $(this).removeClass('selected');
else {
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}
});

关于Jquery 数据表 - 所选行突出显示在第二页中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17506765/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com