jQuery DataTables：除了1页

Question

这里我使用1.9.0 jQuery DataTables插件，当我运行我的代码时，它显示了分页表数据。

• 当我使用分页时，每个事件仅适用于第一页，例如：

  $('#table tr').each(function(){ /* something */ });

• 但是当我使用事件处理程序和click事件时，它在所有页面中都有效，例如：

  $('#table').on("click", 'tr' ,function () { /* something */ });

是否有其他解决方案而非点击：

$('#table').on("each", 'tr' ,function () { /* something */ });

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').on("each", '#products tbody tr',function () {
    if ($(this).hasClass('selected')) $(this).removeClass('selected');
    else {
        $(this).siblings('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});*/ //its not working.

/*$('body').on("click", '#products tbody tr' ,function () {
    if ($(this).hasClass('selected')) $(this).removeClass('selected');
    else {
        $(this).siblings('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});*///its worked for all pages when i clicked only...
/*$('#products tr').each(function(){
    if ($(this).hasClass('selected')) $(this).removeClass('selected');
    else {
        $(this).siblings('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
})*/  // its worked only 1st page...

#products {
    user-select:none;
    -webkit-user-select:none;
    -mox-user-select:none;
    -o-user-select:none;
    cursor:default;
}
#products tbody tr {
    cursor:pointer;
}
.selected, .selected > td {
    background-color:#CF0 !important;
}
.selected:hover, .selected:hover > td {
    background-color:#DBFF4C !important;
}
#table_container {
    margin:0 auto;
    width:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="table_container">
    <table border="1" cellspacing="0" cellpadding="0" id="products" style="clear:both;">
        <thead>
            <tr>
                <th>Column1</th>
                <th>column2</th>
                <th>column3</th>
                <th>column4</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Answer 1

您的问题中的代码几乎正确。您需要使用委托事件，单击处理程序的正确代码如下所示。

$('#products tbody').on('click', 'tr', function(){
    if ($(this).hasClass('selected')){
        $(this).removeClass('selected');
    } else {
        $(oTable.fnGetNodes()).removeClass('selected');
        $(this).addClass('selected');
    }
});

DataTables 1.9 API方法fnGetNodes获取表格正文中使用的<tr>个节点的数组。 $(oTable.fnGetNodes())返回所有<tr>个节点的jQuery集合。我正在使用上面的内容从所有行中删除selected类。

如果要枚举所有行，代码如下所示：

$('#example').dataTable({
    "fnInitComplete": function(oSettings, json){
        $($('#example').dataTable().fnGetNodes()).each(function(){
           /* Process each row */
        });
    }
});

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').on('click', 'tr',function(){
    if ($(this).hasClass('selected')){
        $(this).removeClass('selected');
    } else {
        $(oTable.fnGetNodes()).removeClass('selected');
        $(this).addClass('selected');
    }
});

#products {
    user-select:none;
    -webkit-user-select:none;
    -mox-user-select:none;
    -o-user-select:none;
    cursor:default;
}
#products tbody tr {
    cursor:pointer;
}
.selected, .selected > td {
    background-color:#CF0 !important;
}
.selected:hover, .selected:hover > td {
    background-color:#DBFF4C !important;
}
#table_container {
    margin:0 auto;
    width:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="table_container">
    <table border="1" cellspacing="0" cellpadding="0" id="products" style="clear:both;">
        <thead>
            <tr>
                <th>Column1</th>
                <th>column2</th>
                <th>column3</th>
                <th>column4</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>