Question

我使用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();   
    });
});

Answer 1

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

Answer 2

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

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

因此，您只需要更改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

2 个答案: