首页datatable风格参考bootstrap

datatable风格参考bootstrap

时间: 2023-07-10 19:08:10 浏览: 236

可以通过引入 Bootstrap 的 CSS 文件来为 DataTable 添加样式，以下是一个示例： ```html <!DOCTYPE html> <html> <head> <title>DataTable with Bootstrap Style</title> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Data Table with Bootstrap Style</h1> <table id="example" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>28</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>35</td> <td>Los Angeles</td> </tr> <tr> <td>Bob Johnson</td> <td>42</td> <td>Chicago</td> </tr> </tbody> </table> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function() { $('#example').DataTable(); } ); </script> </body> </html> ``` 这里使用了 DataTables 和 Bootstrap 的 CSS 文件，通过添加 `table-striped` 和 `table-bordered` 类来为表格添加条纹和边框样式。同时，使用了 DataTables 的 JavaScript API 来初始化表格。

阅读全文