当前位置: 首页 > 工具软件 > Pagination > 使用案例 >

pagination控件分页

盖昀
2023-12-01

在使用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();
});


}

 类似资料: