Javascript DataTables：在ajax.reload上重新打开折叠的子行

当使用dataTable的ajax.reload函数自动重新加载表时，我试图重新打开子行。（这将导致所有子行折叠）

我在internet上找到了以下代码并尝试实现它。但这对我不起作用

重新加载表时，我的浏览器控制台日志中会出现以下错误

TypeError:openTableRows为空

希望有人能帮助我或给我指出正确的方向

<script>
var $tagsLabel = $("<lable>");
var $tagsInput = $("<textarea>");

/* Formatting function for row details - modify as you need */
function format(d) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Raw text:</td>' +
        '<td>' + d.Raw_html + '</td>' +
        '</tr>' +
        '</table>';
}

$(document).ready(function () {
        $table = $("#dataTable")
            .on("preInit.dt", function (e, settings) {
                $tagsLabel.append($tagsInput);
                $('.dataTables_tags').append($tagsLabel)
            })
            .on("init.dt", function (e, settings) {
                $tagsInput.tagEditor({
                    delimiter: ', ',
                    placeholder: 'Enter search keywords ...',
                    onChange: function (field, editor, tags) {
                        if (tags.length) {
                            if (tags.length > 1) {
                                $table.search(tags.join('|'), true, false).draw();
                            } else {
                                $table.search(tags[0]).draw();
                            }
                        } else {
                            $table.search('').draw(true);
                        }
                    },
                });
            }).DataTable({
                mark: true,
                "searchHighlight": true,
                "dom": '<l<"dataTables_tags"><t>ip>',
                "ajax": '/json-int',
                "columns": [
                    {
                        "class": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": '',
                        width: "5px"
                    },
                    {"data": "Timestamp", width: "135px"},
                    {"data": "Title"},
                    {"data": "Url"},
                    {"data": "domain"},
                    {"data": "Type"},
                    {"data": "Raw_html", "visible": false}
                ],
                "order": [[1, 'asc']],
                "initComplete": function () {
                    setInterval(function () {
                        $table.ajax.reload(null, false);

                        var currentdate = new Date();
                        var datetime = currentdate.getDay() + "/" + currentdate.getMonth()
                            + "/" + currentdate.getFullYear() + " @ "
                            + currentdate.getHours() + ":"
                            + (currentdate.getMinutes() < 10 ? '0' : '') + currentdate.getMinutes() + ":" + currentdate.getSeconds();
                        document.getElementById("lastUpdated").innerHTML = "Last updated: " + datetime;
                    }, 5000);
                }
            });

        var openTableRows = JSON.parse(localStorage.getItem('openRows'));

        $('#dataTable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = $table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');

                rowIndex = row[0][0];
                var idx = openTableRows.indexOf(rowIndex);
                openTableRows.splice(idx, 1);
                localStorage.setItem('openRows', JSON.stringify(openTableRows));
                console.log(JSON.parse(localStorage.getItem('openRows')));

            } else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');

                rowIndex = row[0][0];
                openTableRows.push(rowIndex);
                localStorage.setItem('openRows', JSON.stringify(openTableRows));
                console.log(JSON.parse(localStorage.getItem('openRows')));
            }
        });
    }
);

var$tagsLabel=$（“”）；
var$tagsInput=$（“”）；
/*行详细信息的格式化功能-根据需要进行修改*/
函数格式（d）{
//`d`是该行的原始数据对象
返回“”+
'' +
'原始文本：'+
''+d.Raw_html+''的+
'' +
'';
}
$（文档）.ready（函数（）{
$table=$（“#数据表”）
.on（“preInit.dt”，函数（e，设置）{
$tagsLabel.append（$tagsInput）；
$（'.dataTables_tags'）。追加（$tagsLabel）
})
.on（“init.dt”，函数（e，设置）{
$tagsInput.tagEditor({
分隔符：'，'，
占位符：“输入搜索关键字…”，
onChange：函数（字段、编辑器、标记）{
如果（标签长度）{
如果（tags.length>1）{
$table.search（tags.join（“|”）、true、false.draw（）；
}否则{
$table.search（标记[0]）.draw（）；
}
}否则{
$table.search（“”）.draw（true）；
}
},
});
}).数据表({
马克：是的，
“searchHighlight”：正确，
“dom”：“”，
“ajax”：“/json int”，
“栏目”：[
{
“类”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：“”，
宽度：“5px”
},
{“数据”：“时间戳”，宽度：“135px”}，
{“数据”：“标题”}，
{“数据”：“Url”}，
{“数据”：“域”}，
{“数据”：“类型”}，
{“数据”：“原始html”，“可见”：false}
],
“订单”：[[1，‘asc']]，
“initComplete”：函数（）{
setInterval（函数（）{
$table.ajax.reload（null，false）；
var currentdate=新日期（）；
var datetime=currentdate.getDay（）+“/”+currentdate.getMonth（）
+“/”+currentdate.getFullYear（）+“@”
+currentdate.getHours（）+“：”
+（currentdate.getMinutes（）<10？'0'：''）+currentdate.getMinutes（）+：“+currentdate.getSeconds（）；
document.getElementById（“lastUpdate”）.innerHTML=“Last updated:”+datetime；
}, 5000);
}
});
var openTableRows=JSON.parse（localStorage.getItem（'openRows'）；
$（'#dataTable tbody'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
变量行=$table.row（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
行索引=行[0][0]；
var idx=openTableRows.indexOf（rowIndex）；
openTableRows.拼接（idx，1）；
setItem（'openRows'，JSON.stringify（openTableRows））；
log（JSON.parse（localStorage.getItem（'openRows'））；
}否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
行索引=行[0][0]；
openTableRows.push（行索引）；
setItem（'openRows'，JSON.stringify（openTableRows））；
log（JSON.parse（localStorage.getItem（'openRows'））；
}
});
}
);

---

你有没有检查过这方面的问题

提供的代码示例显然解决了您的问题。对于特定的数据表

$(document).ready(function() {
    var dt = $('#example').DataTable( {
...
})

跟踪扩展行的ID

// Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
        if ( row.child.isShown() ) {
            ...     
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            ...
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

每次重画datatable/invoke ajax.reload时重新打开展开的行

// On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );

---

顺便问一下，你有没有检查过这方面的问题

提供的代码示例显然解决了您的问题。对于特定的数据表

$(document).ready(function() {
    var dt = $('#example').DataTable( {
...
})

跟踪扩展行的ID

// Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
        if ( row.child.isShown() ) {
            ...     
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            ...
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

每次重画datatable/invoke ajax.reload时重新打开展开的行

// On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );

您还可以查看：您还可以查看：