jQuery row.child 第二页缺失

Question

我使用 jQuery 创建了一个 table。我添加了一个 row.child ，它应显示在每个父行之后。在第一页上，这工作正常。但是在第二页上它不见了。

function format(d) {
    return '' +

            '<i style=";color:#9b9b9b; font-size:10px; Padding-left:50px"> Vertragsart - ' + d[4] + '&nbsp; | &nbsp; Intensität - ' + d[5] + '</i>' +
            '';
}

var $j = jQuery.noConflict();

$j('document').ready(function () {
    var oTable = $j('#position_list').DataTable({
        "order": [[0, "desc"]],
        "iDisplayLength": 50,
        "oLanguage": {
            "sLengthMenu": "Zeige _MENU_ Einträge",
            "sSearch": "Suche:",
            "sInfo": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
            "sInfoEmpty": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
            "sInfoFiltered": "(gefiltert aus _MAX_ Datensätzen)",
            "oPaginate": {
                "sNext": "Nächste",
                "sPrevious": "Vorherige"
            },    
        },
    });

    $j('.parentrow').closest('tr').each(function () {    
        var row = oTable.row(this);
        var data = format(row);
        row.child(format(row.data())).show();   
    });
});

Answer 1

每次重绘 table 时，使用 drawCallback option or draw 事件调用您的代码。

例如：

$j('#position_list').on('draw.dt', function(){
    $j('.parentrow').closest('tr').each(function(){
        var row = oTable.row(this);
        var data = format(row);
        row.child(format(row.data())).show();   
    });
});

Answer 2

问题是您正在使用 jQuery 到 select 行，但是 jQuery 只能访问当前在 DOM 上的行。正如评论中所说，在任何给定时刻，只有当前页面的行在 DOM 中，因此这些是您的代码将操纵的唯一行。

到运行一个jQueryselect或者遍历整个table，数据tablesAPI有$() method.它接受 jQuery select 或运行在所有 tr 元素上 table 及其后代元素，像 jQuery(selector) 那样返回一个 jQuery 对象。

所以你只需要改变你的 jQuery select 或者 oTable.$(...):

oTable.$('.parentrow').closest('tr').each(function () {    
    var row = oTable.row(this);
    var data = format(row);
    row.child(format(row.data())).show();   
});

jQuery row.child 第二页缺失

jQuery row.child missing on second page

javascript

jquery

row

datatables