公告:本站提供编程开发方面的技术交流与分享,打造最佳教程网,希望能为您排忧解难!

JS教程jQuery.pager分页插件在线功能演示

jQuery.pager分页插件在线功能演示

更新时间:2013-05-24 01:01:31|卓燚原创作品|

准备工作:

普通分页示例

html代码

<div id="page" class="pagination"></div>

javascript代码

1

new $.pager({

3    count:201,    //总数据条数

4    //nums:20,    //每页显示的数据条数,默认是20条可以省略

5    pageContainer:'#page',

    onchange:function(){

7        this.hide()//隐藏分页条

8        //逻辑处理...

        alert([

10            '当前页码:page:' + this.page ,

11            '每页条数:nums:' + this.nums ,

12            '总条数:  count:'this.count ,

13            '总页码数:pages' + this.pages

14        ].join("\n"));

15

16        //假设你跳转到第5页时发现,处理失败,需要显示上一页时

17        //加入下面代码后,这个示例永远不会跳转到第5页

        if(this.page == 5){

19            this.page--;   //返回之前的页码,也可以跳转到其他页码

20            this.reload()//重新加载分页条

21        }

22        this.show();//显示分页条

23    }

24});

25

示例效果


联动分页示例

html代码


<!--联动分页示例:改变其中一个分页条的页码时,另外一个分页条的页码也会被改变-->
<div class="unionpage pagination"></div>
<P>这里显示分页的内容,上下两个分页条会同时变化</P>
<div class="unionpage pagination"></div>

javascript代码

1

new $.pager({

3    count:1000,    //总数据条数

4    pageContainer:'.unionpage'

5});

6

示例效果

这里显示分页的内容,上下两个分页条会同时变化


显示样式二的效果

html代码

<div id="pagerDemoStyle2" class="czyx_pager"></div>

javascript代码

1

new $.pager({

3    count:1000,    //总数据条数

4    page : 13,     //指定当前页码

5    styleType:1,   //选择第二种样式

6    pageContainer:'#pagerDemoStyle2'

7});

8

示例效果


ajax功能演示

html代码

<div id="ajaxDemoContainer" class="simpleCode">
这是初始默认内容,点击下面的分页后会向后台获取新的内容,替换掉这里的内容<BR />
ajax的参数同 <a href="http://www.goodxyx.com/tool/jqchm.html#jQuery.ajax" target="_blank">jQuery.ajax</a><BR />
同时这里多了一个jQuery.pager.start方法,如果该方法返回false,那么不会执行后面的ajax请求。
</div>
<div id="ajaxDemoPager" class="pagination"></div>

javascript代码

1

new $.pager({

3    count:120,

4    ajax:{//参数同 jQuery.ajax

5        url:'http://www.goodxyx.com/jquery/plugins/pager.html?name=jQuery.pagerDemo',

6        cache:false,

        /*

8        * 说明:该方法是在ajax发生前触发的

9        *       this.page 是指分页条发生变化前的页码

10        *       goPage 表示将要到达的页码

11        * 注意:使用return false 时,配合 this.page改变和 this.reload()方法

12        *       否则页码永远不会变化

13        */

        start:function(goPage){

            if(this.page==3){

16                var str = '发生变化前,我是在第' + this.page + '页\n';

17                str += '默认情况下,我将要到达第' + goPage + '页\n';

18                str += '不过我阻止了,直接进入第5页\n';

19                this.page = 5;

20                alert(str);

21

22                //return false 表示只要是第3页,不改变分页条和后面的加载

23                //调用reload()后,会重新加载分页条,和触发ajax

24                //由于前面已经设置 page=5,因此会跳转到第5页

25                this.reload();

26                return false ;

            }else if(goPage == 4){

28                //如果将要达到第4页,那么我改变参数的值

29                this.ajax.data['text'] = 'param is change !';

30            }

31        },

32        styleType:1,

33        data:{text:'param-text'}  //向后台传递的参数

34    },

35    ajaxContainer:'#ajaxDemoContainer'

36});

37

示例效果

这是初始默认内容,点击下面的分页后会向后台获取新的内容,替换掉这里的内容
ajax的参数同jQuery.ajax
同时这里多了一个jQuery.pager.start方法,如果该方法返回false,那么不会执行后面的ajax请求。
最佳教程网

最大的技术交流平台 www.goodxyx.com© CopyRight 2011-2013, All Rights Reserved

浙ICP备11033019号