时间戳

首页 > 解决方案 > 如何在 td 内有 Div 的表中添加 Datatable

html - 如何在 td 内有 Div 的表中添加 Datatable

问题描述

我有一个带有 tr td 的下表，其中 td 包含 div 我如何添加带有搜索和分页的 Datatable 所以在下表中我想使用 Datatable 添加分页和搜索。

   <table width=100% id="example1" class="display">
      <tr>
        <td>
          <div class="card faq-item">
            <div id="faq-tab-1" class="collapse" aria-labelledby="faq-tab-1-header" data- 
                  parent="#faq-tab-accordion">
              <div class="card-body">
                <p>
                  description
                </p>
                <a style="color: #fff;" target="_blank" href="complain_details.php?cid=1" class="btn 
                      btn-md btn-primary">Read More
                </a>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="card faq-item">
            <div id="faq-tab-1" class="collapse" aria-labelledby="faq-tab-1-header" data- 
                 parent="#faq-tab-accordion">
              <div class="card-body">
                <p>
                  description
                </p>
                <a style="color: #fff;" target="_blank" href="complain_details.php?cid=1" class="btn 
                   btn-md btn-primary">Read More
                </a>
              </div>
            </div>
          </div>
        </td>
      </tr>
      
</table>

javascript

  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <script src="js/jquery.js"></script>
  <script>
     $(document).ready(function() {
        $('#example1').DataTable();
     } );

标签： htmldatatable

解决方案

看起来您缺少插件工作所需的一些元素。根据DataTables Installation的文档：

要使 DataTables 能够增强 HTML 表格，表格必须是有效的、格式良好的 HTML，具有标题 ( thead) 和单个正文 ( tbody)。tfoot也可以使用可选的页脚 ( )。

根据文档，HTML 的工作片段如下所示：

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

现在要使用上述结构更新您的代码，我已经包含了一个thead带有列标题的单元格并修改了现有的单元格文本值，以便您可以看到搜索功能。

$(document).ready(function() {
  $('#example1').DataTable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table width=100% id="example1" class="display">
  <thead>

    <tr>
      <td>
        Table Header Cell
      </td>
    </tr>

  </thead>

  <tbody>

    <tr>
      <td>
        <div class="card faq-item">
          <div id="faq-tab-1" class="collapse" aria-labelledby="faq-tab-1-header" data- parent="#faq-tab-accordion">
            <div class="card-body">
              <p>
                description one
              </p>
              <a style="color: #fff;" target="_blank" href="complain_details.php?cid=1" class="btn 
                      btn-md btn-primary">Read More
                </a>
            </div>
          </div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class="card faq-item">
          <div id="faq-tab-1" class="collapse" aria-labelledby="faq-tab-1-header" data- parent="#faq-tab-accordion">
            <div class="card-body">
              <p>
                description two
              </p>
              <a style="color: #fff;" target="_blank" href="complain_details.php?cid=1" class="btn 
                   btn-md btn-primary">Read More
                </a>
            </div>
          </div>
        </div>
      </td>
    </tr>

  </tbody>

</table>

推荐阅读