<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="css/bootstrap-table.css"> <!-- Latest compiled and minified JavaScript --> <script src="js/bootstrap-table.js"></script> <!-- Latest compiled and minified Locales --> <script src="js/bootstrap-table-zh-CN.js"></script> <script> //標簽id,url,字段顯示，排序方式，需要傳遞的參數 function query(grid_selector,data_url,col_list,data){ $(grid_selector).bootstrapTable({ //請求方法 method: 'get', //是否顯示行間隔色 striped: true, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） cache: false, //是否顯示分頁（*） pagination: true, //是否啟用排序 sortable: false, //初始化加載第一頁，默認第一頁 //我設置了這一項，但是貌似沒起作用，而且我這默認是0,- - //pageNumber:1, //每頁的記錄行數（*） pageSize: 10, //可供選擇的每頁的行數（*） pageList: [10, 25, 50, 100], //這個接口需要處理bootstrap table傳遞的固定參數,並返回特定格式的json數據 url:data_url, //默認值為 'limit',傳給服務端的參數為：limit, offset, search, sort, order Else //queryParamsType:'', ////查詢參數,每次調用是會帶上這個參數，可自定義 queryParams :function(params) { console.log(params); if(data==null){ data={}; } data._page=(params.offset+params.limit)/params.limit; data._size=params.limit; return data; }, responseHandler:function(res){ return { "total": res.data.records,//總記錄數 "rows": res.data.rows, //數據 }; }, //分頁方式：client客戶端分頁，server服務端分頁（*） sidePagination: "server", //是否顯示搜索 search: false, //Enable the strict search. strictSearch: true, //Indicate which field is an identity field. idField : "id", columns:col_list }); } </script> <script> $(function(){ query("#arbetTable","http://hd.com/game-admin/role/getRole",[{ field: 'id', title: 'id', align: 'center', sortable: true }, { field: 'name', title: '測試標識', align: 'center' },{ field: 'id', title: '操作', align: 'center', formatter:function(value,row,index){ //通過formatter可以自定義列顯示的內容 //value：當前field的值，即id //row：當前行的數據 var a = '<a href="" >測試</a>'; } }],null); }); </script> </head> <body> <table id="arbetTable"></table> </body> </html>