Question

我的页面上有很多桌子。使用 DataTables jQuery和键表插件对其进行了初始化。当我在专用表中使用方法$("#mytable1").destroy()时，所有其他方法丢失键表。有人知道为什么会这样吗？

<!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具有按键导航

Answer 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

方法销毁数据表

1 个答案: