代碼

<!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/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 BootstrapTable-導出數據 bootstrapTable 刷新數據 bootstrapTable:獲取選中行的數據 bootstrapTable bootstrapTable insertRow 新增行保留原數據【筆記】BootstrapTable帶參數刷新數據的坑 BootStrapTable獲取選中數據值並傳參至父頁面數據加載 bootstraptable默認選中第一條數據，且支持鍵盤上下切換數據，左右翻頁 BootstrapTable formatter使用