jquery bootStrapTable的使用

一拳莫敌

于 2024-06-07 09:30:00 发布

阅读量370

点赞数 4

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_40660389/article/details/139444595

版权

Bootstrap Table 是一个基于 Bootstrap 的 jQuery 插件，用于创建响应式和交互式的表格。它提供了许多功能，如排序、分页、搜索、过滤、导出和编辑等。以下是一个简单的 Bootstrap Table 使用示例，以及一些常用属性的介绍：

引入必要的文件

首先，确保你的页面已经引入了 Bootstrap、jQuery 和 Bootstrap Table 的相关文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Table Example</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Bootstrap Table CSS -->
    <link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
    <!-- 表格容器 -->
    <table id="myTable"></table>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入 Bootstrap Table JS -->
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#myTable').bootstrapTable({
                columns: [
                    {field: 'id', title: 'ID'},
                    {field: 'name', title: 'Name'},
                    {field: 'age', title: 'Age'}
                ],
                data: [
                    {id: 1, name: 'John Doe', age: 28},
                    {id: 2, name: 'Jane Doe', age: 24},
                    {id: 3, name: 'Bob Smith', age: 22}
                ]
            });
        });
    </script>
</body>
</html>

初始化表格

在文档加载完成后，使用 jQuery 初始化 Bootstrap Table。

$(document).ready(function() {
    $('#myTable').bootstrapTable({
        // 表格配置选项
    });
});

常用属性

columns: 定义表格的列。每个列对象包含字段名（field）和标题（title）。
data: 表格的数据数组，每个对象代表一行数据。
height: 表格的高度。
striped: 是否显示条纹效果。
pagination: 是否启用分页。
search: 是否显示搜索框。
showColumns: 是否显示列选择下拉框。
showRefresh: 是否显示刷新按钮。
clickToSelect: 是否启用点击行来选择。
sortName: 默认排序的列名。
sortOrder: 排序方式，可选值有 ‘asc’ 和 ‘desc’。
toolbar: 工具栏的容器选择器或 HTML 字符串。
toolbarAlign: 工具栏的对齐方式。
buttonsAlign: 按钮的对齐方式。
columnsAlign: 列的对齐方式。
rowsAlign: 行的对齐方式。
responseHandler: 数据处理函数，用于处理从服务器返回的数据。
queryParams: 发送到服务器的查询参数。

这些是 Bootstrap Table 的一些常用属性。你可以根据需要配置这些属性来定制你的表格。Bootstrap Table 提供了许多其他选项和事件，可以根据需要进行配置。例如，你可以启用排序、分页、搜索等功能，以及自定义工具栏和按钮等。

请注意，Bootstrap Table 的版本和 API 可能会随着时间而更新，因此建议查阅最新的官方文档以获取最新的信息和功能。

一拳莫敌

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jquery bootStrapTable的使用

Bootstrap Table 是一个基于 Bootstrap 的 jQuery 插件，用于创建响应式和交互式的表格。它提供了许多功能，如排序、分页、搜索、过滤、导出和编辑等。
复制链接

扫一扫