Question

我的代码使用“Datatable”库。初始化<table>元素上的数据表

jQuery_3_3_1(".subtable").DataTable({ });

如何在新生成的元素上应用此功能？（不需要我重新渲染页面或为每个页面创建单独的ID并初始化不同的表格。）

编辑：我试过了：

    jQuery_3_3_1('#readiness').on('click', 'td.details-control', function () {
        alert("potato");
        jQuery_3_3_1(".readiness_subtable").DataTable({ });
    });

但仍然被召回并且Datatable输出此错误消息：

DataTables警告：table id = readiness_subtable_0 - 无法重新初始化DataTable。有关此错误的详细信息，请参阅http://datatables.net/tn/3

创建多个“子表”

时

Answer 1

您的错误是尝试使用新/自定义选项重新初始化数据表。确保您只初始化表一次或不更改传递给.DataTable()的选项，请参阅此示例：

let tableData = `<table class="tablesToMakeAwesome">
    <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>
          <tr>
              <td>Garrett Winters</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>63</td>
              <td>2011/07/25</td>
              <td>$170,750</td>
          </tr>
          <tr>
              <td>Ashton Cox</td>
              <td>Junior Technical Author</td>
              <td>San Francisco</td>
              <td>66</td>
              <td>2009/01/12</td>
              <td>$86,000</td>
          </tr>
      </tbody>
  </table>`;
$(document).ready( function () {
  $('#test').append(tableData);
  $('.tablesToMakeAwesome').DataTable();
} );

function createTableWorking() {
  $('#test').append(tableData);
  $('.tablesToMakeAwesome').DataTable();
}

function createTableBreaking() {
  $('#test').append(tableData);
  // Cannot pass custom options to already initialized tables.
  $('.tablesToMakeAwesome').DataTable({ });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<button onclick="createTableWorking()">Generate Table</button>
<button onclick="createTableBreaking()">Break Tables</button>
<div id="test">
  
</div>

我建议只在表创建并在DOM上呈现时初始化表。这将允许您提供特定的表选项，以及防止重新初始化可能因自定义选项而出错的表。类似的东西：

function createTable() {
    let tableId = (new Date()).getMilliseconds();
    $('#test').append(`
      <table id="${tableId}">
          <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>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
            </tbody>
        </table>`);

    $('#' + tableId).DataTable();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<button onclick="createTable()">Generate Table</button>
<div id="test"></div>

在新插入的元素上应用javascript库

1 个答案: