bootstrap列表js

$(function() {
    load();
});

function load() {
    $('#exampleTable')
            .bootstrapTable(
                    {
                        method : 'get', // 服务器数据的请求方式 get or post
                        url : prefix + "/list", // 服务器数据的加载地址
                        showRefresh : true,
                        showToggle : true,
                        showColumns : true,
                        iconSize : 'outline',
                        toolbar : '#exampleToolbar',
                        striped : true, // 设置为true会有隔行变色效果
                        dataType : "json", // 服务器返回的数据类型
                        pagination : true, // 设置为true会在底部显示分页条
                        // queryParamsType : "limit",
                        // //设置为limit则会发送符合RESTFull格式的参数
                        singleSelect : false, // 设置为true将禁止多选
                        // contentType : "application/x-www-form-urlencoded",
                        // //发送到服务器的数据编码类型
                        pageSize : 10, // 如果设置了分页,每页数据条数
                        pageNumber : 1, // 如果设置了分布,首页页码
                        search : true, // 是否显示搜索框
                        showColumns : true, // 是否显示内容下拉框(选择显示的列)
                        sidePagination : "client", // 设置在哪里进行分页,可选值为"client" 或者
                        // "server"
                        // queryParams : queryParams,
                        // //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果
                        // queryParamsType = 'limit' ,返回参数必须包含
                        // limit, offset, search, sort, order 否则, 需要包含:
                        // pageSize, pageNumber, searchText, sortName,
                        // sortOrder.
                        // 返回false将会终止请求
                        columns : [
                                {
                                    checkbox : true
                                },
                                {
                                    field : 'tableName', // 列字段名
                                    title : '表名称' // 列标题
                                },
                                {
                                    field : 'engine',
                                    title : 'engine'
                                },
                                {
                                    field : 'tableComment',
                                    title : '表描述'
                                },
                                {
                                    field : 'createTime',
                                    title : '创建时间'
                                },
                                {
                                    title : '操作',
                                    field : 'id',
                                    align : 'center',
                                    formatter : function(value, row, index) {
                                        var e = '<a class="btn btn-primary btn-sm" href="#" mce_href="#" title="生成代码" onclick="code(\''
                                                + row.tableName
                                                + '\')"><i class="fa fa-code"></i></a> ';
                                        return e;
                                    }
                                } ]
                    });
}

显示效果:

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用 Bootstrap 可以快速生成漂亮的列表页面,以下是一个简单的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap List Page</title> <!-- 引入 Bootstrap 样式文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>My List Page</h1> <table class="table"> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Doe</td> <td>[email protected]</td> </tr> <tr> <td>2</td> <td>Jane Smith</td> <td>[email protected]</td> </tr> <tr> <td>3</td> <td>Bob Johnson</td> <td>[email protected]</td> </tr> </tbody> </table> </div> <!-- 引入 jQuery 和 Bootstrap JavaScript 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> </body> </html> ``` 在这个页面中,我们使用了 Bootstrap 的表格样式,通过添加 `.table` 类可以使表格拥有更好的样式。此外,我们还引入了 Bootstrap 的样式文件和 JavaScript 文件。需要注意的是,Bootstrap 4.x 版本需要依赖 jQuery 库,因此我们需要在页面中引入 jQuery 库。 在实际应用中,我们可以通过后端语言生成动态数据,并将其渲染到页面中。此外,我们还可以使用 Bootstrap 的分页组件和搜索组件来增加列表页面的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值