//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; } }