方法销毁数据表答案

【问题标题】：Method Destroy DataTables方法销毁数据表
【发布时间】：2019-04-15 11:26:47
【问题描述】：

我的页面中有很多表格。它们使用 DataTables jquery 和 keytable 插件初始化。当我在 espefic 表中使用方法 $("#mytable1").destroy() 时，所有其他人丢失 keytable。有人知道为什么会这样吗？

<!DOCTYPE html>
<html >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Test Table</title>

    <!-- Bootstrap -->
    <link href="gentemplate/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/af-2.3.2/b-1.5.4/cr-1.5.0/fc-3.2.5/kt-2.5.0/sc-1.5.0/sl-1.2.6/datatables.min.css"/>


    </head>
    <body>
      <table id="example" class="display table" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
        </tbody>
    </table>

    <hr />
    <button onclick="active()" type="button">Active</button>
    <table id="example3" class="display table" style="width:100%">
      <thead>
          <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Age</th>
              <th>Start date</th>
              <th>Salary</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              <td>Edinburgh</td>
              <td>61</td>
              <td>2011/04/25</td>
              <td>$320,800</td>
          </tr>
      </tbody>
  </table>


  <hr />

  <table id="example2" class="display table" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="lib/datatable/datatables.js"></script>



    <script>
    $(document).ready(function() {
    var table = $('#example').DataTable( {
        deferRender:    true,
        scrollY:        200,
        scrollCollapse: true,
        keys:           true
    } );

    var table2 = $('#example2').DataTable( {
        deferRender:    true,
        scrollY:        200,
        scrollCollapse: true,
        keys:           true
    } );


} );

function active(){
  if(isDataTable("example3")){
    $('#example3').DataTable().destroy();
  }
 $('#example3').DataTable( {
      deferRender:    true,
      scrollY:        400,
      scrollCollapse: true,
      keys:           true
  } );
}

function isDataTable(idGrid) {
    return $.fn.DataTable.isDataTable("#" + idGrid);
}
    </script>
    </body>
    </html>

测试流程：

点击激活，检查所有表格是否有键导航。
再次点击激活，只有example3有按键导航

【问题讨论】：

请添加一些代码，显示您如何添加 keytable 以及您如何销毁以及在何处销毁。
好的，我去发布一个答案，因为我无法编辑我的问题。
好的，我已经编辑了你的问题，你可以删除 ans
好吧。谢谢
所以这里是工作代码。究竟是什么问题。 jsfiddle.net/j5oha0mc/1

标签： javascript jquery datatables jquery-plugins

【解决方案1】：

按照this example，你需要导入keyTable js和css文件

js 和 css 文件

https://cdn.datatables.net/keytable/2.4.1/js/dataTables.keyTable.min.js

https://cdn.datatables.net/keytable/2.4.1/css/keyTable.dataTables.min.css

在 Datatable 初始化器中，只需像这样添加 keys attr

$('#example').DataTable( {
    keys: true
});

工作jsfiddle

【讨论】：

在我的示例中，“lib/datatable/datatables.js”键表是连接的。 Datatables 本身给了我这个选项。在此示例中验证密钥是否正常工作。当您单击销毁时，keytable 在所有表中都停止了。 live.datatables.net/vinerahu/2/edit