我使用bootstrap-table，由于數(shù)據(jù)是從后端返回的對(duì)象中拿到其中的一個(gè)list來(lái)展示的，所以不能直接在js配置里寫接口和返回?cái)?shù)據(jù)，我默認(rèn)ajax請(qǐng)求到數(shù)據(jù)之后如何默認(rèn)渲染到table中，我看網(wǎng)上教程大多數(shù)都是動(dòng)態(tài)從服務(wù)器渲染的。

希望有大神可以教一套靠譜的可以獲取到ajax等數(shù)據(jù)并渲染到頁(yè)面的方案！?。。。。。。?！

這里假設(shè)我已經(jīng)拿到數(shù)據(jù)的數(shù)組 projectList

var $table =  $("#projectTable"),
    $remove = $('#remove'),
    selections = [];
function initTable() {
    $table.bootstrapTable({
        height: getHeight(),
        data:data1,
        method:'get',
        url:"/",
        toolbar:'#toolbar',
        cache: false, // 設(shè)置為 false 禁用 AJAX 數(shù)據(jù)緩存， 默認(rèn)為true
        striped: true,  //表格顯示條紋，默認(rèn)為false
        pagination: true, // 在表格底部顯示分頁(yè)組件，默認(rèn)false
        pageList: [10, 20, 50, 100, 'ALL'], // 設(shè)置頁(yè)面可以顯示的數(shù)據(jù)條數(shù)
        pageSize: 10, // 頁(yè)面數(shù)據(jù)條數(shù)
        pageNumber: 1, // 首頁(yè)頁(yè)碼
        sidePagination: 'client', // 設(shè)置為服務(wù)器端分頁(yè)
        /*queryParams: function (params) { // 請(qǐng)求服務(wù)器數(shù)據(jù)時(shí)發(fā)送的參數(shù)，可以在這里添加額外的查詢參數(shù)，返回false則終止請(qǐng)求
            return {
                pageSize: params.limit, // 每頁(yè)要顯示的數(shù)據(jù)條數(shù)
                offset: params.offset, // 每頁(yè)顯示數(shù)據(jù)的開(kāi)始行號(hào)
                sort: params.sort, // 要排序的字段
                sortOrder: params.order, // 排序規(guī)則
                dataId: $("#dataId").val() // 額外添加的參數(shù)
            }
        },*/
        sortName: 'id', // 要排序的字段
        sortOrder: 'desc', // 排序規(guī)則,
        search: true,                       //是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端，所以，個(gè)人感覺(jué)意義不大
        strictSearch: true,
        showColumns: true,                  //是否顯示所有的列
        showRefresh: true,                  //是否顯示刷新按鈕
        minimumCountColumns: 2,             //最少允許的列數(shù)
        clickToSelect: true,                //是否啟用點(diǎn)擊選中行
        uniqueId: "ID",                     //每一行的唯一標(biāo)識(shí)，一般為主鍵列
        // showToggle:true,                    //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
        cardView: false,                    //是否顯示詳細(xì)視圖
        detailView: false,                   //是否顯示父子表
        showExport: true,
        exportDataType: 'all',
        exportTypes:[ 'csv','excel','pdf'],  //導(dǎo)出文件類型
        columns: [
            {
                checkbox: true, // 顯示一個(gè)勾選框
                align: 'center' // 居中顯示
            }, {
                field: 'statusOrder', // 返回json數(shù)據(jù)中的name
                title: '流程順序', // 表格表頭顯示文字
                align: 'center', // 左右居中
                valign: 'middle', // 上下居中
                sortable: true,
                /*editable: {
                    type: 'text',
                    title: '流程順序',
                    validate: function (value) {
                        value = $.trim(value);
                        if (!value) {
                            return '流程順序不能為空';
                        }
                        if (!/^\+?[1-9][0-9]*$/.test(value)) {
                         return '流程順序必須為大于0的整數(shù).'
                         }
                    }
                },*/
            }, {
                field: 'statusName',
                title: '流程名稱',
                align: 'center',
                valign: 'middle',
                sortable: true,
                /*editable: {
                    type: 'text',
                    title: '流程名稱',
                    validate: function (value) {
                        value = $.trim(value);
                        if (!value) {
                            return '流程名稱不能為空';
                        }
                        var data = $table.bootstrapTable('getData'),
                            index = $(this).parents('tr').data('index');
                        console.log(data[index]);
                        return '';
                    }
                },*/
            }, {
                field: 'statusInfo',
                title: '流程說(shuō)明',
                align: 'center',
                valign: 'middle',
                sortable: true,
                /*editable: {
                    type: 'text',
                    title: '流程說(shuō)明',
                    validate: function (value) {
                        value = $.trim(value);
                        if (!value) {
                            return '流程說(shuō)明不能為空';
                        }
                        var data = $table.bootstrapTable('getData'),
                            index = $(this).parents('tr').data('index');
                        console.log(data[index]);
                        return '';
                    }
                },*/
            }, {
                field: 'formModels',
                title: '流程需填寫表單',
                align: 'center',
                valign: 'middle',
                /*editable: {
                    type: 'text',
                    title: '流程需填寫表單',
                    validate: function (value) {
                        value = $.trim(value);
                        if (!value) {
                            return 'This field is required';
                        }
                        if (!/^\$/.test(value)) {
                            return 'This field needs to start width $.'
                        }
                        var data = $table.bootstrapTable('getData'),
                            index = $(this).parents('tr').data('index');
                        console.log(data[index]);
                        return '';
                    }
                },*/
            }, {
                field: 'tableModels',
                title: '流程需填寫表格',
                align: 'center',
                valign: 'middle',
                /*editable: {
                    type: 'text',
                    title: '流程需填寫表格',
                    validate: function (value) {
                        value = $.trim(value);
                        if (!value) {
                            return 'This field is required';
                        }
                        if (!/^\$/.test(value)) {
                            return 'This field needs to start width $.'
                        }
                        var data = $table.bootstrapTable('getData'),
                            index = $(this).parents('tr').data('index');
                        console.log(data[index]);
                        return '';
                    }
                },*/
            },{
                title: "操作",
                align: 'center',
                valign: 'middle',
                width: 160, // 定義列的寬度，單位為像素px
                formatter: function (value, row, index) {
                    return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.field + value + '\')">刪除</button>';
                }
            }
        ],
        onLoadSuccess: function(){  //加載成功時(shí)執(zhí)行
            console.info("加載成功");
        },
        onLoadError: function(){  //加載失敗時(shí)執(zhí)行
            console.info("加載數(shù)據(jù)失敗");
        }
        /*columns: [
         [
         {
         field: 'state',
         checkbox: true,
         rowspan: 1,
         align: 'center',
         valign: 'middle'
         }, {
         title: 'Item ID',
         field: 'id',
         rowspan: 1,
         align: 'center',
         valign: 'middle',
         sortable: true,
         footerFormatter: totalTextFormatter
         }, {
         title: 'Item Detail',
         field: 'detail',
         colspan: 3,
         rowspan: 1,
         align: 'center'
         }
         ],
         /!*[
         {
         field: 'name',
         title: 'Item Name',
         sortable: true,
         editable: true,
         footerFormatter: totalNameFormatter,
         align: 'center'
         }, {
         field: 'price',
         title: 'Item Price',
         sortable: true,
         align: 'center',
         editable: {
         type: 'text',
         title: 'Item Price',
         validate: function (value) {
         value = $.trim(value);
         if (!value) {
         return 'This field is required';
         }
         if (!/^\$/.test(value)) {
         return 'This field needs to start width $.'
         }
         var data = $table.bootstrapTable('getData'),
         index = $(this).parents('tr').data('index');
         console.log(data[index]);
         return '';
         }
         },
         footerFormatter: totalPriceFormatter
         }, {
         field: 'operate',
         title: 'Item Operate',
         align: 'center',
         events: operateEvents,
         formatter: operateFormatter
         }
         ]*!/
         ]*/
    });
    // sometimes footer render error.
    setTimeout(function () {
        $table.bootstrapTable('resetView');
    }, 200);
    $table.on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
        $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);

        // save your data, here just save the current page
        selections = getIdSelections();
        // push or splice the selections if you want to save all data selections
    });
    $table.on('expand-row.bs.table', function (e, index, row, $detail) {
        if (index % 2 == 1) {
            $detail.html('Loading from ajax request...');
            $.get('LICENSE', function (res) {
                $detail.html(res.replace(/\n/g, '<br>'));
            });
        }
    });
    $table.on('all.bs.table', function (e, name, args) {
        console.log(name, args);
    });
    $remove.click(function () {
        var ids = getIdSelections();
        $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
        });
        $remove.prop('disabled', true);
    });
    $(window).resize(function () {
        $table.bootstrapTable('resetView', {
            height: getHeight()
        });
    });
}

function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), function (row) {
        return row.id
    });
}

function responseHandler(res) {
    $.each(res.rows, function (i, row) {
        row.state = $.inArray(row.id, selections) !== -1;
    });
    return res;
}

function detailFormatter(index, row) {
    var html = [];
    $.each(row, function (key, value) {
        html.push('<p><b>' + key + ':</b> ' + value + '</p>');
    });
    return html.join('');
}

function operateFormatter(value, row, index) {
    return [
        '<a class="like" href="javascript:void(0)" title="Like">',
        '<i class="glyphicon glyphicon-heart"></i>',
        '</a>  ',
        '<a class="remove" href="javascript:void(0)" title="Remove">',
        '<i class="glyphicon glyphicon-remove"></i>',
        '</a>'
    ].join('');
}

window.operateEvents = {
    'click .like': function (e, value, row, index) {
        alert('You click like action, row: ' + JSON.stringify(row));
    },
    'click .remove': function (e, value, row, index) {
        $table.bootstrapTable('remove', {
            field: 'id',
            values: [row.id]
        });
    }
};

function totalTextFormatter(data) {
    return 'Total';
}

function totalNameFormatter(data) {
    return data.length;
}

function totalPriceFormatter(data) {
    var total = 0;
    $.each(data, function (i, row) {
        total += +(row.price.substring(1));
    });
    return '$' + total;
}

function getHeight() {
    return $(window).height() - $('h1').outerHeight(true);
}
function del(field,values) {
    $("#projectTable").bootstrapTable('remove',filed,values);
}
function delMore(id) {
    $("#projectTable").bootstrapTable('removeByUniqueId    ',id);
}
$(function () {
    var scripts = [
            'https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js',
            // location.search.substring(1) || 'https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js',
            'https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/export/bootstrap-table-export.min.js',
            // 'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
            'https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.js',
            'https://cdn.bootcss.com/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js'
        ],
        eachSeries = function (arr, iterator, callback) {
            callback = callback || function () {
                };
            if (!arr.length) {
                return callback();
            }
            var completed = 0;
            var iterate = function () {
                iterator(arr[completed], function (err) {
                    if (err) {
                        callback(err);
                        callback = function () {
                        };
                    }
                    else {
                        completed += 1;
                        if (completed >= arr.length) {
                            callback(null);
                        }
                        else {
                            iterate();
                        }
                    }
                });
            };
            iterate();
        };

    eachSeries(scripts, getScript, initTable);
});

function getScript(url, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = url;
    var done = false;
    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function () {
        if (!done && (!this.readyState ||
            this.readyState == 'loaded' || this.readyState == 'complete')) {
            done = true;
            if (callback)
                callback();

            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;
        }
    };

    head.appendChild(script);

    // We handle everything using the script element injection
    return undefined;
}
//cookie 封裝 獲取 cookie
function getCookie(name) {
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}