jhxxb

要加载的数据: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/

分类:

技术点:

相关文章: