bootstrap前端呼叫案例:
阿新 • • 發佈:2018-12-06
var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#urlTable').bootstrapTable({ url: '${pageContext.request.contextPath}/webService/queryUrlList', //請求後臺的URL(*) method: 'post', //請求方式(*) toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*) pagination: true, //是否顯示分頁(*) sortable: false, //是否啟用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//傳遞引數(*) sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*) paginationPreText : '上一頁', paginationNextText : '下一頁', pageNumber:1, //初始化載入第一頁,預設第一頁 pageSize: 10, //每頁的記錄行數(*) pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*) strictSearch: true, clickToSelect: true, //是否啟用點選選中行 //height: 460, //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度 /* cardView: false, //是否顯示詳細檢視 detailView: false, //是否顯示父子表 */ columns: [{ field: 'ck', title: '序號', align: 'center', width:100, formatter: function (value, row, index) { return index+1; } }, { field: 'url', title: '網頁路徑', halign: 'center', align: 'left', width: 300, formatter(value,row,index){ var htmls = ""; htmls = "<a target='_blank' href='"+row.url+"'>"+row.url+"</a>"; return htmls; } }, { field: 'title', title: '標題', halign: 'center', align: 'left', width: 250 },{ field: 'score', title: '情感分析', align: 'center', width: 150 }] }); }; //得到查詢的引數 oTableInit.queryParams = function (params) { var temp = { //這裡的鍵的名字和控制器的變數名必須一直,這邊改動,控制器也需要改成一樣的 pageSize: params.limit, //頁面大小 pageIndex: (params.offset / params.limit) + 1, //頁碼 name : name, type : type }; return temp; }; return oTableInit; }; var oTable = new TableInit(); oTable.Init();
注:要求後端返回資料中必須為json格式,且資料存放在以rows為key的鍵值對中,陣列的size存放在以total為key的鍵值對中。