Question

我在我的数据库中有分页并实现了选定的行突出显示功能...此功能（行突出显示）在第一页中有效，但第二页和第三页不起作用。

我已经更新了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');
    }
});

JSFIDDLE

Answer 1

为什么你的方法不起作用

由于click是动态创建的，tr事件未发生的原因。 click事件仅附加到<em>存在的元素，并且未附加到稍后将添加的元素。

解决方案

因此，我建议您使用live或delegate将click事件绑定到tr。

$('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。

附加功能

如果您使用的是更高版本的jQuery（，您必须），建议您使用on，

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

有关所用方法的更多信息

<强> delegate

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

<强> on

文档：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）。这将确保click绑定到所有元素。（甚至是动态的）

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

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

1 个答案:

为什么你的方法不起作用

解决方案

附加功能

有关所用方法的更多信息

演示

编辑