datatables 相关问题

我正在尝试将 searchBuilder 添加到我的数据表 Js 中：头我正在尝试将 searchBuilder 添加到我的数据表 Js 中：头部  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>  <link rel="stylesheet" href="https://cdn.datatables.net/2.2.0/css/dataTables.dataTables.css"> <link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.8.1/css/searchBuilder.dataTables.css"> <link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.5.4/css/dataTables.dateTime.min.css">  <script src="https://cdn.datatables.net/searchbuilder/1.8.1/js/dataTables.searchBuilder.js"></script> <script src="https://cdn.datatables.net/searchbuilder/1.8.1/js/searchBuilder.dataTables.js"></script> <script src="https://cdn.datatables.net/datetime/1.5.4/js/dataTables.dateTime.min.js"></script> 桌子： <div class="row mt-5"> <div class="col-12"> <h5>Attendance Report by Employee for {{ selected_month }}</h5> <table id="attendanceTable" class="table table-striped table-hover"> <thead> <tr><th>Full Name</th><th>Attendance Count</th></tr> </thead> <tbody> {% for index, row in attendance_data.iterrows() %} <tr><td>{{ row['Assignee Name'] }}</td><td>{{ row['Attendance Count'] }}</td></tr> {% endfor %} </tbody> </table> </div> </div> 初始化 $(document).ready(function() { // Attendance DataTable with SearchBuilder new DataTable('#attendanceTable', { "pageLength": 10, "order": [[1, "desc"]], layout: { top1: 'searchBuilder' // Adding the SearchBuilder feature } }); }); 遵循文档，但搜索构建器从未出现。请您指出我做得不正确的地方。 DataTables 通常需要特定的集成才能与样式库正确配合。使用官方 DataTables “下载构建器”页面获取您需要的库的所有正确兼容版本。因此，对于带有 DataTables 和 SearchBuilder 扩展的 Bootstrap 5，这里有一个示例： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.css" rel="stylesheet"> <link href="https://cdn.datatables.net/2.2.1/css/dataTables.bootstrap5.css" rel="stylesheet"> <link href="https://cdn.datatables.net/datetime/1.5.5/css/dataTables.dateTime.css" rel="stylesheet"> <link href="https://cdn.datatables.net/searchbuilder/1.8.1/css/searchBuilder.bootstrap5.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.js"></script> <script src="https://cdn.datatables.net/2.2.1/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.2.1/js/dataTables.bootstrap5.js"></script> <script src="https://cdn.datatables.net/datetime/1.5.5/js/dataTables.dateTime.js"></script> <script src="https://cdn.datatables.net/searchbuilder/1.8.1/js/dataTables.searchBuilder.js"></script> <script src="https://cdn.datatables.net/searchbuilder/1.8.1/js/searchBuilder.bootstrap5.js"></script> </head> <body> <div style="margin: 20px;"> <table id="example" class="display dataTable cell-border" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office in Country</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> <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> </table> </div> <script> $(document).ready(function() { // Attendance DataTable with SearchBuilder new DataTable('#example', { "pageLength": 10, "order": [ [1, "desc"] ], layout: { top1: 'searchBuilder' // Adding the SearchBuilder feature } }); }); </script> </body> </html> 在上面的例子中，我还引入了 DateTime 扩展，它是：在编辑器、SearchBuilder 和 DataTables 的其他组件中使用的日期选择器。一旦您将其用于您的特定数据，您就可以添加您可能还需要的任何额外库 - 例如 Plotly。如果执行此操作后遇到一些新问题，您可以随时提出新问题 - 但我建议在问题中提供完整的 [mre]，在这种情况下（理想情况下使用可运行的堆栈片段，以及一些硬编码的测试数据).

javascript datatable datatables

回答 1 投票 0

将列表<T>转换为数据表 C# - 未找到属性

我正在尝试将列表转换为数据表。我当前的代码如下所示，但是 GetProperties(BindingFlags.Public | BindingFlags.Instance) 不返回任何属性。订单对象： c...

c# datatables

回答 1 投票 0

数据表类型错误：aData 未定义

我想用表中的数据库值填充数据表。下面是我的代码清单，一切似乎都正常，但返回错误“TypeError：aData is undefined”，因此数据表未创建...

php javascript jquery codeigniter datatables

回答 2 投票 0

Django - HTML 表问题（可能与 for 循环有关）FPL 预测 - 球队名单

我想在 Django 的 HTML 模板中使用 dataTables。 .html 文件： FPL 预测 - 球队名单 ...