在使用pagination控件时,
首先需要引用三个文件:mricode.pagination.css、mricode.pagination.js和jquery.min.js。注意:jquery.min.js的引用要放在mricode.pagination.js引用的前面。
<link href="css/mricode.pagination.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/mricode.pagination.js"></script>
其次,初始化分页控件:
function init(){
$("#page").pagination({
firstBtnText:'首页',
lastBtnText:'尾页',
prevBtnText:'上一页',
nextBtnText:'下一页',
jumpBtnText:'跳转',
showInfo: true,
showJump: true,
showPageSizes: true,
infoFormat:'{start}~{end}条,共{total}条',
remote:{
url:'Search_Orders',
dataType:'json',
pageParams:function(data){
var native_net = $("#native_net option:selected").text().trim();
var order_type = $("#order_type option:selected").text().trim();
var order_state = $("#order_state option:selected").text().trim();
var gj_name = $("#gj_name option:selected").text().trim();
/*配置pagination发起请求时的参数*/
return {
pageIndex:data.pageIndex, //页码,初始值为0
pageSize:data.pageSize, //页面大小,默认大小为10
native_net:native_net,
order_type:order_type,
order_state:order_state,
gj_name:gj_name
};
},
success:function(data){ //请求成功后,获取的数据绑定到bootstrap table控件上
var objs = eval(data);
$("#message").text(objs.message);
$("#table_Orders").bootstrapTable('destroy').bootstrapTable({
data:objs.list,
toolbar:"#toolbar",
cache:false,
showColumns:false,
showExport:false,
search:true, //显示搜索框
exportDataType:'basic',
uniqueId:"id",
columns:[
{
checkbox:true
},{
field:"id",
title:"序号"
},{
field:"order_id",
title:"工单号",
},{
field:"bz",
title:"备注"
}
]
});
}
}
}).on('pageClicked',function(event,data){
get_orders();
});
}