引导模式中的Jquery数据表在模式关闭后不重新加载

Question

嗨，我在引导模式中有一个 jquery 数据表，模式的数据来自我的 MODEL 类，

<table id="demoGrid1" class="table table-striped table-bordered dt-responsive" >  
                <thead>  
              <tr>  
                <th > Code</th>  
                <th>Description</th>      
                <th>Unit</th>  
                <th style="visibility:hidden"> Price</th>
                  <th style="visibility:hidden"> Color</th>
            </tr>  
                </thead>  
              <tbody>
                  @foreach (var item in Model)
                  {
                      <tr>
                          <td>@item.StockCode</td>
                          <td>@item.Description</td>
                          <td>@item.Unit</td>
                          <td style="visibility:hidden">@item.Price</td>
                          <td style="visibility:hidden">@item.Color</td>
                      </tr>
                  }
              </tbody>
            </table> 

我称这个模型为

 $('#myModal').modal('show');

一旦选择完成就隐藏起来

$('#myModal').modal('hide');

当我在数据表中进行选择时，我的问题是应用了一些样式和所有样式，当我关闭并再次重新打开弹出窗口时，这些样式并没有被清除，即使在我重新打开我的模型后，选择和样式仍然保持不变。

我试过了

$("#myModal").on("hidden.bs.modal", function () {

        $('#demoGrid1').DataTable().draw();
    });

重新绘制数据表，但没有成功。请帮我解决这个问题。如何使用默认值重绘模式弹出窗口中的数据表。

Answer 1

您可以使用destroy() 方法删除DataTables 增强的功能，并将表格恢复到其原始未增强状态，并保留表格中的数据。

$("#myModal").on("hidden.bs.modal", function () {
           var table = $('#demoGrid1').DataTable();
           table.destroy();
           $('#demoGrid1').empty(); // empty in case the columns change
           $('#demoGrid1').DataTable();
    });