首页bootstrap动态渲染table表头

bootstrap动态渲染table表头

时间: 2023-07-02 13:17:39 浏览: 88

要动态渲染表头，你可以使用Bootstrap的JavaScript插件DataTable。首先，你需要在页面中引入DataTable的CSS和JavaScript文件。然后，在HTML中创建一个空的table元素，并使用JavaScript代码来动态生成表头和表格内容。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> </head> <body> <table id="myTable" class="display"> <thead> </thead> <tbody> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function() { var table = $('#myTable').DataTable({ "ajax": "data.json", "columns": [ {"data": "id", "title": "ID"}, {"data": "name", "title": "Name"}, {"data": "age", "title": "Age"} ] }); }); </script> </body> </html> ``` 在上面的示例中，我们使用jQuery和DataTable插件来创建一个表格，表头是动态生成的。我们使用"data.json"文件来加载表格数据，并使用"columns"选项来定义表头。在这个示例中，我们定义了三列，分别是"ID"、"Name"和"Age"。希望这个示例能对你有所帮助！

阅读全文