数据表:重新加载Ajax后如何保持子行打开 [英] Datatables: How can I keep child rows opened after the Ajax reload

问题描述

我正在使用Ajax源生成表.每隔5000 ms刷新一次，打开子行后，将通过表的重绘将其关闭.我该如何打开这些容器?

I'm using an Ajax source to generate the table. This one is refreshed every 5000 ms and when a child row is opened it's then closed by the table's redraw. How can I keep these ones opened?

我的代码:

    /* Formatting function for row details - modify as you need */
    function format ( d ) {
        // `d` is the original data object for the row
        return '<p>Text in child row</p>';
    }

    $(document).ready(function() {
        $('#table').DataTable( {
        ...
        } );

    var tr;
    var row;

    $('#table tbody').on('click', 'td.details-control', function () {

        if (tr !== null && tr !== undefined && row !== null && tr !== undefined) {
            row.child.hide();
            tr.removeClass('shown');            
        }

        tr = $(this).closest('tr');
        row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }

    } );

    $.fn.dataTable.ext.errMode = 'none';    
    var table = $('#table').DataTable();
    setInterval( function () {
        table.ajax.reload( function () {
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {          
                if (tr.hasClass('shown')) {
                    // Open this row
                    row.child( format(row.data()) ).show();
                    tr.addClass('shown');                       
                }
            }
        } );
    }, 5000 );  

    $('table td .details-control').html('<button><i class="fa fa-plus"></i></button>');

} );

请参见子行示例和

See Child rows example and ajax.reload() method for reference.

• 经过研究，我发现人们建议在jQuery中使用cookie

推荐答案

据我所知，您正在使用由来自Ajax的数据创建的新表清除上一个表. 您将必须保存打开的行的状态，并且每当完成刷新表的操作时，便会使用保存的状态来展开行.

As i have understood you are clearing previous table with new table created by data coming from ajax. You will have to save state of opened rows and whenever you are done with refreshing table expand rows with your saved state.

这篇关于数据表:重新加载Ajax后如何保持子行打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！