jQuery Datatable 多选在带有分页的第 2 页中不起作用答案

【问题标题】：jQuery Datatable multiselect not working in page 2 with paginationjQuery Datatable 多选在带有分页的第 2 页中不起作用
【发布时间】：2012-09-14 12:35:08
【问题描述】：

我正在为我的应用程序使用数据表，多选在第一页中工作，但它似乎不适用于带有分页的第 2 页和第 3 页。

代码是，

    $(document).ready(function() {   
        $('#example tr').click( function() {
            $(this).toggleClass('row_selected');
        } );    
    } );

css 是

table.display tr.even.row_selected td {
background-color: #efefef;
}

table.display tr.odd.row_selected td {
background-color: #efefef;
}

我还应该包括什么才能使多选适用于其他页面？还是代码有什么问题？

请帮忙

谢谢，

【问题讨论】：

标签： jquery datatable

【解决方案1】：

两件事..

1.确保在你的第2页和第3页中包含js代码

2.可能你的tr是动态生成的..你需要delegate

 $(document).ready(function() {   
        $('#example').delegate('tr','click', function() { //example -> tableid
            $(this).toggleClass('row_selected');
        } );    
    } );

【讨论】：

【解决方案2】：

您正在动态修改 dom，因此如果使用 jQuery 1.7+，您需要使用 .delegate 或 .on 进行委托

$(document).ready(function() {   
    $('#example').on('click','tr', function() { 
        $(this).toggleClass('row_selected');
    } );    
});

或者如果使用 jQuery 1.6 及更低版本

$(document).ready(function() {   
    $('#example').delegate('tr', 'click', function() { 
        $(this).toggleClass('row_selected');
    } );    
});

通过委派您将事件处理程序绑定到父元素.. 然后它会侦听事件何时冒泡.. 例如，当您单击 tr 时...它会冒泡此示例中的 document 然后文档处理事件..

如果你尝试以常规方式绑定它

前

$('tr').click()function(){});

或

$('tr').bind('click',function(){});

或

$('tr').on('click',function(){});

他们希望 tr 元素在 dom 准备就绪时可用 - （如果您将代码放在 document.ready 函数中） - 否则不会将任何事件绑定到该元素

【讨论】：