HTML：

    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.css">
    
<table id="boardList" class="table table-bordered table-striped table-hover"></table>
 

JS：

    //載入列表
    getBoardList();

    function getBoardList() {
        $("#listTip").html("<span  class='fa fa-cog fa-spin fa-fw'></span> 正在載入欄目列表……");
        $.getJSON("php/boardMgt.php", {
            act: "getBoardList"
        }, function (data) {
            $("#boardList").bootstrapTable("destroy");
        $("#boardList").bootstrapTable({
            method: "get",
            cache: false,
            striped: true,
            pagination: true,
            pageSize: 10,
            pageNumber: 1,
            pageList: [10, 20, 50, 100, 200, 500],
            showColumns: false,
            showRefresh: false,
            showExport: true,
            exportTypes: ["csv", "txt", "xml"],
            search: true,
            searchAlign: "left",
            clickToSelect: false,
            sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
            columns: [{   //定義表格列，各列的field值為後臺查詢資料表返回的各欄位名
                    field: "website",
                    title: "所屬站點",
                    align: "center",
                    valign: "middle",
                    sortable: "true",
                },
                {
                    field: "bid",
                    title: "欄目編號",
                    align: "center",
                    valign: "middle",
                    sortable: "true"
                },
                {
                    field: "name",
                    title: "欄目名稱",
                    align: "center",
                    valign: "middle",
                    sortable: "true"
                },

                {
                    field: "isSpecial",
                    title: "是否專題欄目",
                    align: "center",
                    valign: "middle",
                    sortable: "true",
                    formatter: function (value, row, index) {
                        temp = "";
                        if (row.isSpecial == 1)
                            temp = "<span class='text-success'>是</span>";
                        else
                            temp = "<span class='text-danger'>否</span>";
                        return (temp);
                    }
                },
                {
                    field: "boardIconPath",
                    title: "欄目圖示",
                    align: "center",
                    valign: "middle",
                    sortable: "true",
                    formatter: function (value, row, index) {
                        temp = "";
                        if (row.boardIconPath != null) {
                            $iconPath = row.boardIconPath.substr(3, row.boardIconPath.length);
                            temp = "<img src='" + $iconPath + "' width='100' height='35'/>";
                        } else
                            temp = '無圖'
                        return (temp);
                    }
                },
                {
                    field: "active",
                    title: "狀態",
                    align: "center",
                    valign: "middle",
                    sortable: "true",
                    formatter: function (value, row, index) {
                        temp = "";
                        if (row.active == 1)
                            temp = "<span class='text-success'>正常</span>";
                        else
                            temp = "<span class='text-danger'>停用</span>";
                        return (temp);
                    }
                },
                {
                    field: "Button",
                    title: "操作",
                    align: "center",
                    valign: "middle",
                    sortable: "false",
                    events: operateEvents,
                    formatter: function (value, row, index) {
                        temp = "<button class='btn btn-primary btn-sm' id='edit'>編輯</button>";
                        if (row.active == 0)
                            temp += " <button class='btn btn-success btn-sm' id='start'>啟用</button>";
                        else if (row.active == 1)
                            temp += " <button class='btn btn-danger btn-sm' id='stop'>停用</button>";
                        return (temp);
                    }
                }
            ],
            data: data   //資料來源於ajax的返回值，json格式
        });
        })
    }

    //自定義表中最後一列管理按鈕功能事件
    window.operateEvents = {
        "click #edit": function (e, value, row, index) { //使用者編輯功能
          alert("你點選了編輯按鈕");
        },
        "click #stop": function (e, value, row, index) { //停用使用者
            alert("你點選了停用按鈕");

        },
        "click #start": function (e, value, row, index) { //啟用使用者
            alert("你點選了啟用按鈕");
        }
    }
 

PHP：

if ($act == "getBoardList") {
    $sql = "select b.board as bid,b.title as name,concat('（',w.wid,'）',w.name) as website,b.isSpecial,b.boardIconPath,b.active from boards b, website w where b.websiteId=w.wid and b.websiteId=$wid";
    $rs = $dbh->query($sql)->fetchAll();
    echo (json_encode($rs));
}