如何从datatable中获取已删除的行

时间:2017-02-17 04:46:30

标签: javascript jquery datatables

我正在使用datatable并在点击按钮时删除多行现在我正在尝试从数据表中取回已删除的行,下面是我为重置表而编写的代码,但它不起作用,请帮忙此

<html>
<head>      
<script>  
$(document).ready(function() {
    var table = $('#scmJobs').DataTable({
         "paging":   false,
        "bFilter": false,
        "info":     false
    });

    $('#scmJobs tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

    $('#deleteButton').click( function () {
       // alert( table.rows('.selected').data().length +' row(s) selected' );
       table.rows('.selected').cache();
        table.rows('.selected').remove().draw( false );
    } );

      $('#resetButton').click( function () {
         $.fn.dataTable.ext.search.pop();
    table.draw();   
    } );

} );

 </script>
</head>
<body>

                    <input type="button" id="deleteButton" value="Delete"/> 
                    <input type="button" id="resetButton" value="Reset"/>   
                       <table id="scmJobs" border="0" cellspacing="0" cellpadding="0"
                    class="grid" width="100%">
                        <thead>
                            <tr style="background-color: silver;"  >
                                <th style="text-align:left;" width="183px"  >Attribute</th> 
                                <th width="76px">DQ</th>     
                                <th width="76px">QTY</th>    
                                <th width="77px"> DQ</th>    
                                <th width="77px">QTY </th>  
                                <th width="77px">DQ</th>    
                                 <th width="77px">QTY</th>
                                 <th width="77px">DQ</th>
                                 <th width="77px">QTY</th>
                                 <th width="77px">DQ</th>
                                 <th width="77px">QTY</th>   
                                 <th width="74px">DQ</th>   
                                 <th width="74px" >QTY </th>     


                            </tr>
                        </thead>
                        <tbody>
                            <tr  data-user="End of new attach date">
                                <td style="text-align:left;">End of new attach date</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>

                            </tr>
                            <tr  data-user="Contract bill-to">
                                <td style="text-align:left;">Contract bill-to</td>
                                <td style="text-align:right;">0.999907</td>
                                <td style="text-align:right;">89139</td>
                                <td style="text-align:right;">0.999907</td>
                                <td style="text-align:right;">89139</td>
                                <td style="text-align:right;">0.999907</td>
                                <td style="text-align:right;">89139</td>
                                <td style="text-align:right;">0.999907</td>
                                <td style="text-align:right;">89139</td>
                                <td style="text-align:right;">0.999907</td>
                                <td style="text-align:right;">89139</td>
                                <td style="text-align:right;">0.9999072</td>
                                <td style="text-align:right;">89139</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Configuration</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>
                                <td style="text-align:right;">100.000</td>
                                <td style="text-align:right;">9000000000</td>

                            </tr>

                        </tbody>
                      </table>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

From DataTables row().remove() API:“此方法(及其复数对应的rows()。remove())将完全从DataTable中删除所选行,从浏览器中删除已分配的数据和节点内存。”< / p>

解决方案A)在重置时刷新页面并确保服务器提供原始版本。

解决方案B)创建一个回收站数组或隐藏表,然后在那里移动行而不是remove()。然后在$('#resetButton').click()移动它们或将它们添加回来。确保在单击重置时清除回收站。