1

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

我已经更新了 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

4

1 回答 1

8

为什么你的方法不起作用

您的click事件没有发生的原因是因为trs 是动态创建的。click事件仅附加到存在的元素，而不附加到稍后将添加的元素。

解决方案

所以我建议你使用liveordelegate将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

  • 文档：http ://api.jquery.com/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');
    }
});
于 2013-07-06T20:29:25.747 回答