bootstrap table 分页+自定义按钮列
$('#exampleTableFromData').bootstrapTable({
method: 'post', // 向服务器请求方式
contentType: "application/x-www-form-urlencoded", // 如果是post必须定义
//height: "250" //表格高度
//data: bt_data,//数据源
url:url2,//加载URL
/*striped: true, //使表格带有条纹
*/ search: false,//启用搜索
pageNumber: 1,//初始化table时显示的页码
pageSize: 4,//每页条目
/* pageList: [10 , 20, 50, 100],*/
showRefresh: true,//显示刷新按钮
sidePagination: "server",//表格分页的位置
// mobileResponsive: true,
sortable:"true",
sortOrder: "asc",
dataField: "data",//后台数据
queryParams: function (params) {
console.log(params);
console.log(params.limit);
console.log(params.offset);
return {
pageSize: params.limit,
pageIndex:params.pageNumber //上一篇教你怎么改掉js,不然会出现未定义
}
},
queryParamsType:'limit', // 请求参数，这个关系到后续用到的异步刷新
/*minimumCountColumns: 2, //最少允许的列数
clickToSelect: true,*/ //是否启用点击选中行
pagination: true,
/* showToggle: true, */ //是否显示详细视图和列表视图的切换按钮
/* cardView: false, */ //是否显示详细视图
searchAlign: "left",//查询框对齐方式
searchOnEnterKey: true,//回车搜索
buttonsAlign: "left",//按钮对齐方式
toolbar: "#toolbar",//指定工具栏
toolbarAlign: "right",//工具栏对齐方式,
onClickRow:function(row, tr){
console.log(row);
detailPage('编辑信息','xxxx',row)
},
columns:[
{
field: 'number',
title: '序号',
width: '5%',
align:'center',
switchable:false,
formatter:function(value,row,index){
//return index+1; //序号正序排序从1开始
var pageSize=$('#exampleTableFromData').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
var pageNumber=$('#exampleTableFromData').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
return pageSize * (pageNumber - 1) + index + 1; //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
}
},
{
title: 'id',
field: 'id',
align: 'center',
valign: 'middle',
width: '7%',
visible: false
},
{
title: '标题',
field: 'memo_title',
align: 'center',
valign: 'middle',
width: '20%'
},
{
title: '类型',
field: 'memo_type',
align: 'center',
valign: 'middle',
width: '7%'
},
{
title: '内容',
field: 'memo_content',
align: 'center',
valign: 'middle'
},
{
title: '时间',
field: 'memo_date',
align: 'center',
valign: 'middle',
width: '9%'
}
,
{
title: '创建人',
field: 'memo_username',
align: 'center',
valign: 'middle',
width: '7%'
}/*,
{
title: '紧急程度',
field: 'column3',
align: 'center',
valign: 'middle',
width: '7%',
}*//*,
{
title: '开始日期',
field: 'start_time',
align: 'center',
valign: 'middle',
width: '10%'
},
{
title: '结束日期',
field: 'end_time',
align: 'center',
valign: 'middle',
width: '10%'
}*//*,
{
title: '操作',
field: 'operate',
align: 'center',
valign: 'middle',
width: '12%',
formatter: operateFormatter //自定义方法，添加操作按钮
}*/
]
});
function operateFormatter (value, row, index) {
var id = value;
var result = "";
result += "详情";
result += " 编辑 ";
result += " 删除 ";
return result;
} ;
刷新：$('#exampleTableFromData').bootstrapTable('refresh');//刷新数据
queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
//queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数/ 分页查询参数，是以键值对的形式设置的
function queryParams(params) {
return {
eventName: $('#eventqueryform input[name=\'eventName\']').val(), // 请求时向服务端传递的参数
status: $('#eventqueryform input[name=\'status\']').val(), // 请求时向服务端传递的参数
location: $('#eventqueryform input[name=\'location\']').val(), // 请求时向服务端传递的参数
startdate: $('#eventqueryform input[name=\'startdate\']').val(), // 请求时向服务端传递的参数
enddate: $('#eventqueryform input[name=\'enddate\']').val(), // 请求时向服务端传递的参数
limit: params.limit, // 每页显示数量
offset: params.offset, // SQL语句偏移量
}
}