jQuery row.child 在第二页上丢失答案

【问题标题】：jQuery row.child missing on second pagejQuery row.child 在第二页上丢失
【发布时间】：2015-11-19 14:43:46
【问题描述】：

我使用 jQuery 创建了一个表。我添加了一个 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();   
    });
});

【问题讨论】：

我不明白你所说的“第一页”和“第二页”是什么意思
表格中有分页。在表格的第一页上，它显示了所有子行。当我切换到第二页时，chilrow 不见了
那么我认为您在创建分页后应用了该功能，然后行不在“那里”。在调用 dataTable 之前尝试移动创建行的 .each() 函数，看看它是否解决了问题
对不起，我不明白，我应该如何在创建表之前创建一个子行？
啊哈……你说得对，真丢脸。问题仍然存在，您应该在每次显示页面后调用行创建，但我不是 DataTable 专家，不知道是否有一些回调/挂钩。

标签： javascript jquery datatables row

【解决方案1】：

问题是您使用 jQuery 来选择行，但 jQuery 只能访问当前在 DOM 上的行。正如 cmets 中所说，在任何给定时刻，只有当前页面的行在 DOM 中，所以这些是您的代码将操作的唯一行。

要在整个表中运行 jQuery 选择器，Datatables API 具有$() method。它接受一个 jQuery 选择器，该选择器将在表上的 all tr 元素及其后代元素上运行，返回一个像 jQuery(selector) 一样的 jQuery 对象。

所以你只需要将你的 jQuery 选择器更改为 oTable.$(...):

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

【讨论】：

【解决方案2】：

每次重绘表格时，使用drawCallback 选项或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();   
    });
});

【讨论】：