使用jquery.pagination.js进行分页处理

时间:2022-12-09 15:46:56

使用jquery.pagination.js进行分页处理

Html代码:

<div class="pagelist" style="height:25px">

                                          <divid="Pagination" style="float: right"></div>

</div>

将上段代码放在页面的最底端即可。

Js代码:

代码流程:

首先利用这个js需要进行两次后台的访问。

第一次是查找到分页的个数,也就是说分几页。

第二次是查找当前页的数据

// 分页每页信息条数  

           var items_per_page=10; 

           //页号

           var pageIndex =0;     

//总共的数据条数,例子中在进入页面以前(action中或是mvc中)就得到了数据条数。

              var recordtotal=${allNum};

 

$(document).ready(function(){

                  //判断返回的数据条数是否为0,如果为零则提示无数据

                            if(recordtotal==0){

                                          //无数据的代码

                            }else{

                                          //分页-只初始化一次 

                                          $("#Pagination").pagination(recordtotal,{

                                                        callback:PageCallback,  

                                                        items_per_page:items_per_page,  //每页显示的条目数

                                                        num_display_entries:10,  //默认值10可以不修改

                                                        num_edge_entries:1,  //两侧显示的首尾分页的条目数

                                                        prev_text:"上一页",

                                                        next_text:"下一页", 

                                                        current_page:pageIndex //当前页索引

                                          }); 

                            //分页-只初始化一次        

                            }                  

              });

 

//翻页调用的函数

              functionPageCallback(index, jq) {

                            InitTable(index);

                            returnfalse;         

              } 

              //请求分页数据 

              functionInitTable(pageIndex) {

                            varareaname=$("#areaname").val(); 

                            $("#recordlist").mask("数据加载中...");

                            $.ajax({ 

                                          type:"POST", 

                                          url:"powerAll.mvc", 

                                          cache:false,

                                          data:{"pageNum":pageIndex,"pageSize":items_per_page},  //需要传到后台的数据有当前页(即将显示的页面从0开始)和每页几条

                                          dataType:'json', 

                                          contentType:"application/x-www-form-urlencoded", 

                                          success:function(data){

                                                        //清空显示层中的数据

                                                        varrecordlist =$("#recordlist > tbody:first");

                                                        recordlist.empty(); 

                                                        $.each(data,function(i,value){//从后台传回json数据进行分析

                                                                      ipReplace= value.ip;

                                                                      ipReplace= ipReplace.split(".").join("_");

                                                                      varrecordlistcontent="<tr><td><input type='checkbox'value='"+value.powerId+"'name='wait_checked_"+value.powerId+"' /></td>"+

                                                                                "<td>"+value.powerType+"</td>"+

                                                                                "<td>"+value.ip+"</td>"+

                                                                                "<td>"+value.powerInputPortNumber+"</td>"+

                                                                                "<td>"+value.powerOutputPortNumber+"</td>"+

                                                                                "<td><spanid="+ipReplace+">"+value.temperature+"</span></td>";

                                                                          recordlistcontent+="<tdclass='ta_r'><a href='transmitterconfigpage.action?transmitterId="+value.transmitterId+"'>编辑</a></td></tr>";

                                                                          recordlist.append(recordlistcontent);

                                                                          $("#recordlist").unmask("数据加载中...");

                                                                          //setInterval(getTempByIp(value.ip),10000);

                                                                          ips+=value.ip+",";

                                                                          //alert($("tabletd").size());

                                                                          //window.location.reload();

                                                        });

                                                        getTempByIp();

                                          }//success函数结束                                 

                            });//ajax请求结束     

              }

 

以上主要是前台的代码,后台

在后台主要有两个方法:

第一个得到数据条数:可以利用sql语句:select count* from user where…这样可以得到总共的条数;

第二个是得到当前页的数据的json数据:

              在这里先不说json数据是什么样的。以mysql为例,可以利用sql语句:select * from userwhere… limit 当前页*每页条数,(当前页+1*每页条数。在得到list以后可以利用json4j转换为json数据,或手动转换。

这样既可完成分页。

相关文章