bootstrap table加載數據


//html

<table id="dailyDevTable"></table>

//js

$(function () {
    initTable();
});
function initTable() {
    var oTable = new TableInit();
    oTable.Init();
}
var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#dailyDevTable').bootstrapTable('destroy');
        $('#dailyDevTable').bootstrapTable({
            url: '/daily/dailyDev/getDailyList',//請求后台的URL(*)
            method: 'get',                      //請求方式(*)
            striped: true,                      //是否顯示行間隔色
            cache: false,                       //是否使用緩存,默認為true(*)
            pagination: true,                   //是否顯示分頁(*)
            queryParams: oTableInit.queryParams,//傳遞參數(*)
            sidePagination: "server",           //分頁方式:client客戶端分頁,server服務端分頁(*)
            pageSize: 10,                       //每頁的記錄行數(*)
            columns: [{
                checkbox: true
            }, {
                field: 'dailyId',
                visible: false //隱藏列
            }, {
                field: 'userId',
                visible: false
            },{
                field: 'dailyName',
                title: '日報名稱'
            }, {
                field: 'deptName',
                title: '部門名稱'
            }, {
                field: 'userName',
                title: '填報人'
            }, {
                field: 'otherinfo',
                title: '日報內容',
                width: '40%'
            }, {
                field: 'operate',
                title: '操作',
                formatter: operateFormatter //自定義方法,添加操作按鈕
            },
            ]
        });
    };
    //得到查詢的參數
    oTableInit.queryParams = function (params) {
        var args = {   //這里的鍵的名字和控制器的變量名必須一致
            limit: params.limit,   //頁面大小
            offset: params.offset //頁碼
        };
        return args;
    };
    return oTableInit;
};
function operateFormatter(value, row, index) {//賦予的參數
    return [
        '<a class="btn btn-success btn-sm" ' +
        'onclick="initVisit(\''+row.userId+'\',\''+row.dailyName+'\',\''+row.dailyId+'\')">' +
        '<i class="fa fa-clone"></i></a>'
    ].join('');
}
//查看詳細
function initVisit(userId,dailyName,dailyId){
   //todo
}

 //java

@GetMapping("/getDevData")
@ResponseBody
public PageUtils getDevData(int limit,int offset){
    List<Map<String,Object>> list = new ArrayList<>();

    for (int i = 1; i <= limit; i++) {
        Map<String,Object> map = new HashMap<>();
        map.put("dailyName","日報名稱"+Integer.toString(offset+i));
        map.put("deptName","部門名稱"+Integer.toString(offset+i));
        map.put("userName","填報人"+Integer.toString(offset+i));
        map.put("otherInfo","日報內容"+Integer.toString(offset+i));
        list.add(map);
    }
    PageUtils pageUtils = new PageUtils(list,100);

    return pageUtils;
}


//返回分頁查詢數據類
public class  PageUtils implements Serializable {
    private static final long serialVersionUID = 1L;
    private int total;
    private List<?> rows;

    public PageUtils(List<?> list, int total) {
        this.rows = list;
        this.total = total;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<?> getRows() {
        return rows;
    }

    public void setRows(List<?> rows) {
        this.rows = rows;
    }

}


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM