pagination控件分页

本文介绍了如何使用pagination控件进行分页操作。首先需要引入mricode.pagination.css、mricode.pagination.js和jquery.min.js文件,注意jquery.min.js的引用顺序。接着初始化分页控件,设置各项参数,如按钮文本、信息展示等。同时,通过remote参数配置请求地址、数据类型及参数,请求成功后将数据绑定到bootstrap table中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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


}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值