<!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>
