在重新加载div后,在数据表中保存展开子行的状态

时间:2017-08-21 13:10:32

标签: javascript jquery css datatables

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

  1. 当我在重新加载后展开行时,子行也扩展了像父行
  2. 这样的图标
  3. 展开行图标无法更改
  4. 以下是我想要的以及我得到的一个例子。

    enter image description here

    我正在尝试动态更改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>
    

1 个答案:

答案 0 :(得分:0)

我通过改变循环来做到了。现在我只是触发展开按钮点击。

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