Javascript 重新加载div后在datatable中保存扩展子行的状态

我的应用程序正在使用数据库，当数据库中的数据发生变化时，我的页面将重新加载。为了显示数据，我使用了引导数据表。我的datatable总是有一个子隐藏列，我想在刷新页面之前保存扩展状态。我做到了，但我有两个问题：

当我在重新加载后展开行时，子行也会像父行一样展开图标

展开的行图标不会更改

下面是一个例子，我想要什么，我得到什么

我试图动态地改变tr类，但它不起作用，或者只是我弄错了

我的js代码：

<script type="text/javascript">
    function refreshtable() {
       var openRows = [];
       var table = $('#table').DataTable();
       table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
          var tr = rowIdx;
          var row = table.row(tr);
          if (row.child.isShown()) {
             openRows.push(rowIdx);
          }
       })    

       $('#tablediv').hide();
       $('#load').show();
       $("#tablediv").load("mainrf.jsp");


       setTimeout(function(){
          var table = $('#table').DataTable();      
          var arrayLength = openRows.length;
          var roww;
          for (var i = 0; i < arrayLength; i++) {
              roww = table.row(openRows[i]);
              roww.child(format(roww.data())).show();
          }     
       }, 500);
    }


    function format(value) {
       var temprow = value.toString();
       var pieces = temprow.split(/[\s,]+/);
       var piece = pieces[pieces.length-1];
       return '<table><tbody><tr><td>Comments:  ' + piece + '</td></tr><tbody></table>';
    }
</script>

函数刷新表（）{
var openRows=[]；
var table=$（'#table'）.DataTable（）；
table.rows（）.every（函数（rowIdx、tableLoop、rowLoop）{
var tr=rowIdx；
var行=表.行（tr）；
if（row.child.isShown（））{
openRows.push（rowIdx）；
}
})    
$（'#tablediv'）.hide（）；
$（'#load'）.show（）；
$（“#tablediv”）.load（“mainrf.jsp”）；
setTimeout（函数（）{
var table=$（'#table'）.DataTable（）；
var arrayLength=openRows.length；
var roww；
对于（变量i=0；i

我通过改变for循环完成了。现在我只是触发展开按钮点击

for (var i = 0; i < arrayLength; i++) {
            $( 'td:first-child', table.row( openRows[i]).node() ).trigger( 'click' );
        }   

for（变量i=0；i