Jquery datatables - 所选行hightlight在第二页不工作 [英] Jquery datatables - selected row hightlight is not working in second page
问题描述
我在我的datable中有分页，我实现了选定的行突出显示功能...此功能（行突出显示）正在第一页工作，但第二和第三页不起作用。
I have pagination in my datable and i implemented selected row highlight feature...This feature(row highlight) is working in first page but second and third pages are not working.
我已经更新了jsfiddle中的代码，请查看建议。
I have updated the code in jsfiddle , please take look into 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
推荐答案
为什么你的方法不起作用
您的点击事件的原因不是因为 tr 被动态创建的原因。 点击事件仅附加到存在的元素，并且不附加到稍后添加的元素。
Why your approach did not work
The reason your click event isn't happening because the trs are dynamically created. The click events are only attached to elements that exist and aren't attached to elements which will be added later.
所以我建议你使用 live 或委托将点击事件绑定到 tr s 。
So I suggest you use live or delegate to bind the click events to the trs.
$('body').delegate('#products tbody tr', "click", function () {
if ($(this).hasClass('selected')) $(this).removeClass('selected');
else {
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}
});
我们将其绑定到< body> 是因为它将一直存在，您的事件将被委派给 tr s。
The reason we're binding it to <body> is because it'll be existant all the time and your events would be delegated to the trs from there.
如果您使用的是更高版本的jQuery，（必须），建议您在上使用，
If you're using a later version of jQuery,(which you must) it'd be advisable to use on,
$('body').on("click", '#products tbody tr' ,function () {
//your code
});
有关使用方法的更多信息
委托
More info on the methods used
delegate
- 文件： http://api.jquery.com/delegate/
- 它做了什么：根据特定的一组根元素，将处理程序附加到一个或多个事件，以适应现在或将来的选择器的所有元素。
on
on
- 文件： a href =http://api.jquery.com/on/ =noreferrer> http://api.jquery.com/on/
- 它所做的：将一个或多个事件的事件处理函数附加到所选元素。
- for jQuery 1.6 : http://jsfiddle.net/rwPFx/18/
- for jQuery 1.9 : http://jsfiddle.net/rwPFx/19/
更多的方法是使用 live（）（因为你使用jQuery 1.6）。这将确保单击绑定到所有元素。 （甚至动态）
One more way would be to use live() (since you're using jQuery 1.6). This would ensure that the click is bound to all elements. (even dynamic)
$('#products tbody tr').live("click", function () {
if ($(this).hasClass('selected')) $(this).removeClass('selected');
else {
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}
});
这篇关于Jquery datatables - 所选行hightlight在第二页不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
