use*_*474 1 datatable jquery pagination
我在我的数据中有分页,我实现了选定的行突出显示功能...此功能(行突出显示)在第一页中有效,但第二页和第三页不起作用.
我已经更新了jsfiddle中的代码,请查看建议.
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');
}
});
您的click事件未发生的原因是因为trs是动态创建的.的click事件仅附接到存在的元素和不连接到后面将要添加的元素.
所以我建议你使用live或delegate将click事件绑定到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.
如果您使用的是更高版本的jQuery(必须使用),建议您使用on,
$('body').on("click", '#products tbody tr' ,function () {
//your code
});
delegate
on
还有一种方法是使用live()(因为你使用的是jQuery 1.6).这将确保它与click所有元素绑定.(甚至是动态的)
$('#products tbody tr').live("click", function () {
if ($(this).hasClass('selected')) $(this).removeClass('selected');
else {
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}
});