`
xinyoulinglei
  • 浏览: 126033 次
社区版块
存档分类
最新评论

转载 主题：写了个Jquery异步分页插件

    博客分类：
  • java
jquery 
阅读更多
主题：写了个Jquery异步分页插件
http://www.iteye.com/topic/1126433 作者：zhutianxiang
public class Page {

/**
* 当前页号
*/
private int currPageNum = 1;


/**
* 总记录数
*/
private int totalRowSize = 0;

/**
* 每页记录数
*/
private int pageRowSize = 10;

public int getCurrPageNum() {
return currPageNum;
}

public void setCurrPageNum(int currPageNum) {
this.currPageNum = currPageNum;
}

public int getTotalPageNum() {
int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1);
return total;
}

public int getTotalRowSize() {
return totalRowSize;
}

public void setTotalRowSize(int totalRowSize) {
this.totalRowSize = totalRowSize;
}

public int getPageRowSize() {
return pageRowSize;
}

public void setPageRowSize(int pageRowSize) {
this.pageRowSize = pageRowSize;
}

public int getFirstResult(){
if(getCurrPageNum()<=0) return 0;

return getPageRowSize() * (getCurrPageNum() - 1);
}

public int getMaxResult() {
return this.getFirstResult()+this.getPageRowSize();
}

}
==================================================================
然后看list_user.jsp：

Java代码 
1.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
3.<html xmlns="http://www.w3.org/1999/xhtml">  
4.  <head>  
5.    <title>异步分页</title>  
6.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
7.    <link href="../css/local.css" rel="stylesheet" type="text/css" />  
8.    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>  
9.    <script type="text/javascript" src="../js/asyn_page.js"></script>  
10.    <script type="text/javascript">  
11.    var totalRowSize = ${totalRowSize};  
12.    $(document).ready(function(){  
13.        $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);  
14.    });  
15.      
16.    //构建内容  
17.    function buildHtml(users){  
18.        $.each(users,function(i,user){  
19.            var tr = [  
20.                '<tr>',  
21.                  '<td>',user.userId,'</td>',  
22.                  '<td>',user.username,'</td>',  
23.                  '<td>',user.sex,'</td>',  
24.                  '<td>',user.age,'</td>',  
25.                  '<td>',user.email,'</td>',  
26.                  '<td>',user.address,'</td>',  
27.                  '<td>',user.registerTime,'</td>',  
28.                  '<td></td>',  
29.                '</tr>' 
30.            ].join('');  
31.            $("#tbody").append(tr);  
32.        });  
33.    }  
34.    </script>  
35.  </head>  
36.  <body>  
37.    <table>  
38.      <thead>  
39.        <tr>  
40.          <th>ID</th>  
41.          <th>用户名</th>  
42.          <th>性别</th>  
43.          <th>年龄</th>  
44.          <th>Email</th>  
45.          <th>地址</th>  
46.          <th>注册时间</th>  
47.          <th>操作</th>  
48.        </tr>  
49.      </thead>  
50.      <tbody id="tbody"></tbody>  
51.    </table>  
52.    <div id="pageWidget" class="page"></div>  
53.  </body>  
54.</html> 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>异步分页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../css/local.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/asyn_page.js"></script>
    <script type="text/javascript">
    var totalRowSize = ${totalRowSize};
    $(document).ready(function(){
        $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
    });
   
    //构建内容
    function buildHtml(users){
        $.each(users,function(i,user){
        var tr = [
      '<tr>',
          '<td>',user.userId,'</td>',
          '<td>',user.username,'</td>',
          '<td>',user.sex,'</td>',
          '<td>',user.age,'</td>',
          '<td>',user.email,'</td>',
          '<td>',user.address,'</td>',
          '<td>',user.registerTime,'</td>',
          '<td></td>',
        '</tr>'
  ].join('');
  $("#tbody").append(tr);
    });
    }
    </script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>Email</th>
          <th>地址</th>
          <th>注册时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody"></tbody>
    </table>
    <div id="pageWidget" class="page"></div>
  </body>
</html>
可以看到id为tbody的元素是作为分页内容展示容器，id为pageWidget的元素作为分页控件展示容器。

然后提供了一个buildHtml()函数来具体构建分页内容的。

使用异步分页插件很简单，只要这么调用：

Js代码 
1.$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize); 
$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize); 这是最简化调用。还可以传额外查询参数，以及定制每页显示记录数，具体使用方式见插件的具体介绍。

下面是asynPage插件内容：

Js代码 
1./* 
2. * ===================AJAX异步分页================= 
3. *  
4. * Copyright 2012 8 23, zhutx 
5. *  
6. * 假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用： 
7. * $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10}); 
8. * 参数说明： 
9. * ------------Required----------- 
10. * 参数一：请求URL 
11. * 参数二：渲染结果集的页面容器 
12. * 参数三：负责渲染结果集到页面的函数 
13. * 参数四：总记录数 
14. * ------------Optional----------- 
15. * 参数五(json对象)： 
16. * 属性pageRowSize:每页记录数(不配置，则默认为20) 
17. * 属性param:请求参数(json格式) 
18. */ 
19.(function($){  
20.    var settings;  
21.    var page;  
22.    var paramStr;  
23.      
24.    $.fn.asynPage = function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){  
25.      
26.        settings = $.extend({  
27.            currPageNum:1,  
28.            pageRowSize:20,  
29.            param:null 
30.        },callerSettings||{});  
31.      
32.        settings.contentContainer = $(contentContainer);  
33.        settings.url = url;  
34.        settings.pageWidget = this;  
35.        settings.totalRowSize = totalRowSize;  
36.        settings.buildHtml_fun = buildHtml_fun;  
37.          
38.        page = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);  
39.          
40.        paramStr = makeParamStr(settings.param);  
41.          
42.        //开始获取数据  
43.        fetchData(page.getCurrPageNum());  
44.          
45.        return this;  
46.    };  
47.      
48.    /* 将json转换为请求参数字符串 */ 
49.    var trunParamConfig2RequestParamStr = function(json){  
50.        var str = "";  
51.        for(key in json){  
52.            if(str==""){  
53.                str += key+"="+json[key];  
54.            }else{  
55.                str += "&"+key+"="+json[key];  
56.            }  
57.        }  
58.        return str;  
59.    };  
60.      
61.    /* 将配置参数拼接为请求字符串 */ 
62.    var makeParamStr = function(param_json){  
63.        if(param_json==null){  
64.            return "";  
65.        }else{  
66.            return trunParamConfig2RequestParamStr(param_json);  
67.        }  
68.    };  
69.      
70.    /*  
71.     * 负责获取后台数据，获取完毕后会触发构建分页控件 
72.     */ 
73.    var fetchData = function(currPageNum){  
74.          
75.        page.setCurrPageNum(currPageNum);  
76.        var firstResult = page.getFirstResult();  
77.        var maxResult = page.getMaxResult();  
78.        var pageRowSize = page.getPageRowSize();  
79.          
80.        var data = null;  
81.        if(paramStr){  
82.            data = paramStr + "&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;  
83.        }else{  
84.            data = "page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;  
85.        }  
86.          
87.        $.ajax({  
88.            type :"POST",  
89.            url : settings.url,  
90.            data :data,  
91.            success :function(datas){  
92.                settings.contentContainer.empty();  
93.                settings.buildHtml_fun(datas);  
94.                buildPageWidget(page);//触发构建分页控件  
95.            },  
96.            error:function(xmlHttpRequest,textStatus,errorThrown){  
97.                if(textStatus == "error"){  
98.                    var error = eval('('+xmlHttpRequest.responseText+')');  
99.                    alert("Sorry："+error.errorCode+"，"+error.message+"！");  
100.                }  
101.            }  
102.        });  
103.    };  
104.      
105.    var trunTargetPage = function(pageNum){  
106.        fetchData(pageNum);  
107.    }  
108.      
109.    /* 为分页控件绑定事件 */ 
110.    var bindEvent = function(){  
111.        var links = settings.pageWidget.find("a");  
112.        $.each(links,function(i,link){  
113.            var link = $(link);  
114.            var pageNum = link.attr("pageNum");  
115.            link.click(function(){  
116.                trunTargetPage(pageNum);  
117.            });  
118.        });  
119.    }  
120.      
121.    /* 构建分页控件的具体算法实现 */ 
122.    var buildPageWidget = function(page){  
123.          
124.        //构建分页控件前，先清理现有控件  
125.        settings.pageWidget.empty();  
126.          
127.        /* --------------- 下面开始进入真正的分页控件构建过程 -------------- */ 
128.          
129.        /* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */ 
130.        settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页&nbsp;<span>"+page.getTotalRowSize()+"</span>条记录</div>");  
131.        settings.pageWidget.append("<ul>");  
132.        /* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */ 
133.          
134.        /* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */ 
135.        var currPageNum = Number(page.getCurrPageNum());  
136.        var totalPageNum = Number(page.getTotalPageNum());  
137.          
138.        if(currPageNum==1){  
139.            //如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充  
140.        }else{  
141.            settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>");  
142.            settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>");  
143.        }  
144.        /* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */ 
145.          
146.        /* --------------- 3.开始：构建分页数字控件 -------------- */ 
147.        if(totalPageNum<10){  
148.            for(var i=1;i<=totalPageNum;i++){  
149.                if(i==currPageNum){  
150.                    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");  
151.                }else{  
152.                    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>");  
153.                }  
154.            }  
155.        //如果总页数>=10    
156.        }else{  
157.            //如果当前页小于5，则显示1-9项，且记忆当前项  
158.            if(currPageNum<5){  
159.                for(var i =1;i<10;i++){  
160.                    if(i==currPageNum){  
161.                        settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");  
162.                    }else{  
163.                        settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");  
164.                    }  
165.                }  
166.            //如果当前页>=5，且总页数与当前页的差<4  
167.            }else if(totalPageNum-currPageNum<4){  
168.                for(var i=totalPageNum-8;i<=totalPageNum;i++){  
169.                    if(i==currPageNum){  
170.                        settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");  
171.                    }else{  
172.                        settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");  
173.                    }  
174.                }  
175.            //如果当前页>=5，则显示围绕当前页的9项，且记忆当前项      
176.            }else{  
177.                for(var i=currPageNum-4;i<currPageNum+5;i++){  
178.                    if(i==currPageNum){  
179.                        settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");  
180.                    }else{  
181.                        settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>");  
182.                    }  
183.                }  
184.            }  
185.        }  
186.        /* --------------- 3.结束：构建分页数字控件 -------------- */ 
187.          
188.        /* --------------- 4.开始：构建“下一页”和“尾页”控件 ------------- */ 
189.        if(totalPageNum==currPageNum){  
190.            //如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充  
191.        }else{  
192.            settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>");  
193.            settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾页' class='last'>尾页</a></li>");  
194.        }  
195.        /* --------------- 4.结束：构建“下一页”和“尾页”控件 ------------- */ 
196.          
197.        //还要为控件绑定点击事件  
198.        bindEvent();  
199.    }  
200.      
201.})(jQuery);  
202. 
203./* 
204. * Page类 
205. */ 
206.function Page(currPageNum,totalRowSize,pageRowSize){  
207.    this.currPageNum = currPageNum;  
208.    this.totalRowSize = totalRowSize;  
209.    this.pageRowSize = pageRowSize;  
210.}  
211.Page.prototype.getCurrPageNum = function(){  
212.    return this.currPageNum;  
213.};  
214.Page.prototype.setCurrPageNum = function(currPageNum){  
215.    this.currPageNum = currPageNum;  
216.};  
217.Page.prototype.getTotalPageNum = function(){  
218.    return (this.totalRowSize%this.pageRowSize==0)?(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1);  
219.};  
220.Page.prototype.getTotalRowSize = function(){  
221.    return this.totalRowSize;  
222.};  
223.Page.prototype.setTotalRowSize = function(totalRowSize){  
224.    this.totalRowSize = totalRowSize;  
225.};  
226.Page.prototype.getPageRowSize = function(){  
227.    return this.pageRowSize;  
228.};  
229.Page.prototype.setPageRowSize = function(pageRowSize){  
230.    this.pageRowSize = pageRowSize;  
231.};  
232.Page.prototype.getFirstResult = function(){  
233.    if(this.getCurrPageNum()<=0) return 0;  
234.    return this.getPageRowSize() * (this.getCurrPageNum() - 1);  
235.};  
236.Page.prototype.getMaxResult = function(){  
237.    return this.getFirstResult() + this.getPageRowSize();  
238.}; 
/*
* ===================AJAX异步分页=================
*
* Copyright 2012 8 23, zhutx
*
* 假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用：
* $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10});
* 参数说明：
* ------------Required-----------
* 参数一：请求URL
* 参数二：渲染结果集的页面容器
* 参数三：负责渲染结果集到页面的函数
* 参数四：总记录数
* ------------Optional-----------
* 参数五(json对象)：
* 属性pageRowSize:每页记录数(不配置，则默认为20)
* 属性param:请求参数(json格式)
*/
(function($){
    var settings;
    var page;
    var paramStr;
   
    $.fn.asynPage = function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){
   
        settings = $.extend({
            currPageNum:1,
            pageRowSize:20,
            param:null
        },callerSettings||{});
   
        settings.contentContainer = $(contentContainer);
        settings.url = url;
        settings.pageWidget = this;
        settings.totalRowSize = totalRowSize;
        settings.buildHtml_fun = buildHtml_fun;
       
        page = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);
       
        paramStr = makeParamStr(settings.param);
       
        //开始获取数据
        fetchData(page.getCurrPageNum());
       
        return this;
    };
   
    /* 将json转换为请求参数字符串 */
    var trunParamConfig2RequestParamStr = function(json){
        var str = "";
    for(key in json){
        if(str==""){
            str += key+"="+json[key];
        }else{
            str += "&"+key+"="+json[key];
        }
    }
    return str;
    };
   
    /* 将配置参数拼接为请求字符串 */
    var makeParamStr = function(param_json){
        if(param_json==null){
            return "";
        }else{
            return trunParamConfig2RequestParamStr(param_json);
        }
    };
   
    /*
     * 负责获取后台数据，获取完毕后会触发构建分页控件
     */
    var fetchData = function(currPageNum){
       
        page.setCurrPageNum(currPageNum);
        var firstResult = page.getFirstResult();
        var maxResult = page.getMaxResult();
        var pageRowSize = page.getPageRowSize();
       
        var data = null;
        if(paramStr){
            data = paramStr + "&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;
        }else{
            data = "page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;
        }
       
        $.ajax({
type :"POST",
url : settings.url,
data :data,
success :function(datas){
    settings.contentContainer.empty();
    settings.buildHtml_fun(datas);
    buildPageWidget(page);//触发构建分页控件
},
error:function(xmlHttpRequest,textStatus,errorThrown){
    if(textStatus == "error"){
        var error = eval('('+xmlHttpRequest.responseText+')');
        alert("Sorry："+error.errorCode+"，"+error.message+"！");
    }
}
});
    };
   
    var trunTargetPage = function(pageNum){
        fetchData(pageNum);
    }
   
    /* 为分页控件绑定事件 */
    var bindEvent = function(){
        var links = settings.pageWidget.find("a");
        $.each(links,function(i,link){
            var link = $(link);
            var pageNum = link.attr("pageNum");
            link.click(function(){
                trunTargetPage(pageNum);
            });
        });
    }
   
    /* 构建分页控件的具体算法实现 */
    var buildPageWidget = function(page){
       
        //构建分页控件前，先清理现有控件
        settings.pageWidget.empty();
       
        /* --------------- 下面开始进入真正的分页控件构建过程 -------------- */
       
        /* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */
        settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页&nbsp;<span>"+page.getTotalRowSize()+"</span>条记录</div>");
        settings.pageWidget.append("<ul>");
        /* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */
       
        /* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */
        var currPageNum = Number(page.getCurrPageNum());
        var totalPageNum = Number(page.getTotalPageNum());
       
        if(currPageNum==1){
            //如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充
        }else{
            settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>");
            settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>");
        }
        /* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */
       
        /* --------------- 3.开始：构建分页数字控件 -------------- */
        if(totalPageNum<10){
for(var i=1;i<=totalPageNum;i++){
if(i==currPageNum){
    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>");
}
}
//如果总页数>=10
}else{
//如果当前页小于5，则显示1-9项，且记忆当前项
    if(currPageNum<5){
    for(var i =1;i<10;i++){
    if(i==currPageNum){
    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
}
    }
    //如果当前页>=5，且总页数与当前页的差<4
    }else if(totalPageNum-currPageNum<4){
    for(var i=totalPageNum-8;i<=totalPageNum;i++){
    if(i==currPageNum){
    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
}
    }
    //如果当前页>=5，则显示围绕当前页的9项，且记忆当前项
    }else{
    for(var i=currPageNum-4;i<currPageNum+5;i++){
    if(i==currPageNum){
    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>");
}
    }
    }
}
/* --------------- 3.结束：构建分页数字控件 -------------- */

/* --------------- 4.开始：构建“下一页”和“尾页”控件 ------------- */
if(totalPageNum==currPageNum){
//如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充
}else{
            settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>");
            settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾页' class='last'>尾页</a></li>");
}
/* --------------- 4.结束：构建“下一页”和“尾页”控件 ------------- */

//还要为控件绑定点击事件
bindEvent();
    }
   
})(jQuery);

/*
* Page类
*/
function Page(currPageNum,totalRowSize,pageRowSize){
    this.currPageNum = currPageNum;
    this.totalRowSize = totalRowSize;
    this.pageRowSize = pageRowSize;
}
Page.prototype.getCurrPageNum = function(){
    return this.currPageNum;
};
Page.prototype.setCurrPageNum = function(currPageNum){
    this.currPageNum = currPageNum;
};
Page.prototype.getTotalPageNum = function(){
    return (this.totalRowSize%this.pageRowSize==0)?(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1);
};
Page.prototype.getTotalRowSize = function(){
    return this.totalRowSize;
};
Page.prototype.setTotalRowSize = function(totalRowSize){
    this.totalRowSize = totalRowSize;
};
Page.prototype.getPageRowSize = function(){
    return this.pageRowSize;
};
Page.prototype.setPageRowSize = function(pageRowSize){
    this.pageRowSize = pageRowSize;
};
Page.prototype.getFirstResult = function(){
    if(this.getCurrPageNum()<=0) return 0;
    return this.getPageRowSize() * (this.getCurrPageNum() - 1);
};
Page.prototype.getMaxResult = function(){
    return this.getFirstResult() + this.getPageRowSize();
};
分享到：
| XML测试类
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    利用JQuery写一个简单的异步分页插件

    利用JQuery编写一个简单的异步分页插件，可以为Web应用提供便捷的分页解决方案。 ### 知识点一：JQuery与异步分页 JQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历和操作、事件处理、动画...

    html 自己写的jquery分页插件

    本项目涉及的是一个自定义的 jQuery 分页插件，用于实现数据的分页展示，提高用户体验，特别是处理大量数据时。下面将详细介绍这三个技术以及分页插件的相关知识点。 **HTML（HyperText Markup Language）** 是网页...

    jQuery分页插件 很实用

    jQuery 分页插件是网页开发中的重要工具，它能够帮助开发者轻松实现数据的分页显示，提高用户体验，尤其是在处理大量数据时。这个插件通常包括各种样式和交互效果，使得分页不仅实用，而且美观。在本教程中，我们将...

    jQuery Ajax分页插件(jquery.pagination)

    `jQuery Pagination Plugin`是针对jQuery设计的一个Ajax分页插件，用于实现高效且用户友好的分页功能。 ### jQuery分页插件的基本概念 1. **Ajax**：异步JavaScript和XML，允许页面与服务器进行通信，更新部分页面...

    jquery.pagination 异步 分页

    jQuery Pagination 是一个基于jQuery的轻量级分页插件，它可以方便地为列表添加分页功能。该插件支持自定义每页显示的条目数量、跳转到指定页面等功能，并且提供了丰富的回调函数用于处理数据加载等操作。 #### 二...

    jQuery分页插件设置分页内容显示数量的分页代码

    首先，我们需要选择一个适合的jQuery分页插件。有许多开源的选项可供选择，例如jQuery Pagination Plugin、jQuery UI Paginator、Bootstrap-Pagination等。这里我们以jQuery Pagination Plugin为例，这是一个简单...

    jquery ajax分页插件

    jQuery AJAX分页插件正是为了解决这个问题，通过异步请求从服务器获取指定页的数据，然后动态插入到页面中。 `ajaxpage`标签暗示了我们可能会讨论一个名为`AjaxPage`的特定插件。虽然具体插件细节未给出，但一般而...

    jQuery Pagination分页插件.zip

    jQuery Pagination是一款广泛应用于网页开发中的分页插件，它能够帮助开发者轻松地在大量数据中实现页面间的导航，提升用户体验。这款插件以其简洁的API、丰富的自定义选项以及良好的浏览器兼容性，深受前端开发者的...

    jQuery分页插件pagination.js

    **jQuery分页插件pagination.js** 是一个广泛应用于网页数据分页的JavaScript库，它基于强大的jQuery框架构建，为开发者提供了高效、灵活的分页解决方案。分页是Web应用程序中常见的功能，特别是在处理大量数据时，...

    jQuery表格数据分页插件代码

    在这个"jQuery表格数据分页插件代码"中，我们可以看到一个完整的实现，它允许用户按需加载和浏览数据，优化了用户体验。 1. **jQuery基础**：jQuery是一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、...

    无刷新，异步分页插件

    这里我们主要讨论基于jQuery的无刷新异步分页插件。 jQuery是一款广泛使用的JavaScript库，简化了DOM操作、事件处理和Ajax交互等任务。在分页场景中，jQuery插件可以帮助开发者轻松实现动态加载内容，用户只需要...

    JavaScript YUI 2.8: DataTable jquery form 异步请求显示数据分页

    综上所述，通过结合使用 JavaScript YUI 2.8 的 DataTable 和 jQuery form 插件，我们可以创建一个动态、交互式的表格，能够异步请求数据并实现分页功能。在实际项目中，还需要注意性能优化，比如使用服务器端分页...

    jquery table分页插件

    **jQuery Table 分页插件详解** 在Web开发中，数据展示是常见的需求，尤其是在处理大量数据时，分页成为提高用户体验的重要手段。jQuery Table分页插件为开发者提供了便捷的解决方案，它允许用户轻松地在表格中实现...

    jQuery封装分页插件.rar

    "jQuery封装分页插件.rar"提供的就是一个用jQuery实现的分页功能插件。 这个插件可能包含以下核心知识点： 1. **jQuery基础**：了解jQuery的基本语法，如选择器（ID选择器、类选择器、属性选择器等）、DOM操作（`$...

    简单轻巧的Jquery分页插件

    JQuery分页插件是解决这个问题的一种高效方案，它能够帮助开发者轻松地实现动态加载和分页显示数据，提高用户体验。本篇将详细介绍这款简单轻巧的Jquery分页插件，并探讨其核心功能和应用场景。 Jquery分页插件是...

    Jquery扩展插件，图片异步分页浏览

    本主题聚焦于一个特定的应用场景：使用jQuery扩展插件实现图片的异步分页浏览。这种技术在现代网页设计中十分常见，特别是在图片展示类网站或社交媒体平台，能够有效地提高用户体验，减少页面加载时间。 首先，我们...

    jQuery带分页动态数据表格插件

    本教程将深入讲解如何利用jQuery实现一个带分页的动态数据表格插件。 首先，我们需要理解jQuery的核心概念。jQuery通过提供易用的API，使得JavaScript代码更简洁、更高效。例如，`$(selector)`用于选取DOM元素，`....

    jquery easyui pagination 分页插件扩展

    在本案例中，我们关注的是"jquery easyui pagination 分页插件扩展"，这是一个用于增强默认分页功能的自定义插件。 分页在数据展示中扮演着重要的角色，特别是在处理大量数据时，它能让用户按需加载和浏览数据，...

    jQuery动态表格数据分页插件

    本文将深入探讨“jQuery动态表格数据分页插件”，这款插件能够帮助开发者轻松实现动态表格数据的分页显示，同时支持自定义设置分页参数，以提高网页的性能和用户交互性。 首先，jQuery是一个广泛使用的JavaScript库...

    基于jquery的分页插件

    总之，创建一个基于jQuery的分页插件涉及到前端开发的多个方面，包括DOM操作、事件处理、状态管理、样式设计和插件化编程。通过实践和理解这些知识点，开发者可以提高在Web应用开发中的技能和效率。

Magicbox
Global site tag (gtag.js) - Google Analytics