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

$（文档）.ready（函数（）{
$（'#示例1'）。数据表（）；
} );

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

为了使DataTables能够增强HTML表，该表必须是有效的、格式良好的HTML，具有标题（

thead

）和单个正文（

tbody

）。也可以使用可选的页脚（

tfoot

）

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

第1栏
第2栏
第1行数据1
第1行数据2
第2行数据1
第2行数据2

现在，为了用上述结构更新代码，我添加了一个带有列标题单元格的

thead

，并修改了现有的单元格文本值，以便您可以看到搜索功能

$（文档）.ready（函数（）{
$（'#示例1'）。数据表（）；
});

表头单元格

描述一


说明二


  <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();
     } );