BootstrapTable-加载数据

最新推荐文章于 2023-03-24 07:00:00 发布

weixin_30340819

最新推荐文章于 2023-03-24 07:00:00 发布

阅读量384

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jhxxb/p/10785218.html

版权

要加载的数据：https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?search=&order=asc&offset=0&limit=10

代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <!--jquery-->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <!--bootstrap-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--bootstrap-table-->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
    <!--bootstrap-table-lanuage-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
</head>
<body>
<div class="container">
    <div class="select">
        <select class="form-control" id="locale">
            <option value="zh-CN" selected>zh-CN</option>
            <option value="zh-TW">zh-TW</option>
            <option value="en-US">en-US</option>
        </select>
    </div>
    <div>
        <table id="table"></table>
    </div>
</div>
<script>
    var $table = $('#table');
    var datas = [];

    $(function () {
        $.ajax({
            url: "https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?search=&order=asc&offset=0&limit=10",
            success: function (d) {
                if (d) {
                    datas = d.rows;
                    // 初始化表格
                    initTable();
                }
            }
        });
    });

    $('#locale').change(initTable);

    function initTable() {
        // 先销毁再创建
        $table.bootstrapTable('destroy').bootstrapTable({
            data: datas,// 表格数据
            locale: $('#locale').val(),// 语言
            classes: 'table table-bordered table-hover table-striped', // 样式，table-striped 隔行变色
            columns: [ // 列详情
                {
                    title: 'ID',// 表头字段名
                    field: 'id',// 数据 key
                    sortable: true,// 排序
                    align: 'center',// 居中
                }, {
                    title: 'Item Name',
                    field: 'name',
                    align: 'center'
                }, {
                    title: 'Item Price',
                    field: 'price',
                    align: 'center',
                    formatter: function (value, row, index) { // 处理该行数据
                        if (value == '$0') {
                            return "haha!"
                        } else {
                            return value;
                        }
                    }
                }
            ]
        });
    }
</script>
</body>
</html>

结果

例子：https://examples.bootstrap-table.com/#welcome.html

API：https://bootstrap-table.com/docs/api/table-options/

转载于:https://www.cnblogs.com/jhxxb/p/10785218.html

weixin_30340819

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootstrapTable-加载数据

要加载的数据：https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?search=&order=asc&offset=0&limit=10代码<!DOCTYPE html><html lang="zh"><head> <met...
复制链接

扫一扫