JavaScript实现前端分页控件


Posted in Javascript onApril 19, 2017

       现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据。前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等)。通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来也很方便。当后台数据到达后,浏览器重新渲染界面当然也包括js分页控件,如果觉得每次绘制分页控件对前端性能有影响也可以不绘制,但实现起来相对麻烦。

       本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象,其实是一样的对于后者只不过将四个参数放在一个对象中。pIndex:每次请求的页码,pSize:每次请求的页容量,container: 放分页控件的容器,fn:如何向服务器请求数据

       代码中主要用到了闭包,将上一次的请求信息保存起来,以备下次使用,虽然代码可以直接拿来用但是样式不是通用的,需要每次调样式还好样式比较简单。

function pagination(obj){
    /*pageIndex: index,
pageSize: size,
count:   count,  
container: container,
fn  :   fn
     */
    if(!obj||typeof obj!="object"){
        return false;
    }
    var pageIndex= obj.pageIndex||1,
      pageSize=obj.pageSize||10,
      count= obj.count||0,
      container= obj.container,
      callback=obj.fn||function(){};
    var pageCount =Math.ceil(count/pageSize); 
    if(pageCount==0){
        return false ;
    }  
    if(pageCount<pageIndex){
        return false;
    }
    /*事件绑定*/
    function bindEvent(){
        //上一页事件
        $(container).find(">ul>.pg-prev").unbind("click").bind("click",function(){
                if(pageIndex <=1){
                return false ;
                }
                if(typeof callback=="function"){
                pageIndex--;
                pageIndex = pageIndex<1?1:pageIndex;
                obj.pageIndex= pageIndex;
                callback(pageIndex);
                pagination(obj);
                }
                });
        //下一页事件
        $(container).find(">ul>.pg-next").unbind("click").bind("click",function(){
                if(pageIndex ==pageCount){
                return false ;
                }
                if(typeof callback=="function"){
                pageIndex++;
                pageIndex =pageIndex >pageCount?pageCount:pageIndex;
                obj.pageIndex= pageIndex;
                callback(pageIndex);
                pagination(obj);
                }
                });
        $(container).find(">ul>li:not(.pg-more):not(.pg-prev):not(.pg-next)").unbind("click").bind("click",function(){
                pageIndex= +$(this).html();
                pageIndex = isNaN(pageIndex)?1:pageIndex;
                obj.pageIndex= pageIndex;
                if(typeof callback=="function"){
                callback(pageIndex);
                pagination(obj);
                }
                });
    };

    /*画样式*/
    function printHead(){
        var html=[];
        html.push('<li class="pg-prev '+(pageIndex==1?"pg-disabled":"")+'">上一页</li>');
        return html.join("");
    }
    function printBody(){
        var html=[];
        var render=function(num,start){
            start=start||1;
            for(var i=start;i<=num;i++){
                html.push('<li class="'+(pageIndex==i?"pg-on":"")+'">'+i+'</li>');
            }
        }
        if(pageCount<=7){
            render(pageCount);
        }else{
            if(pageIndex <4){
                render(4);
                html.push('<li class="pg-more">...</li>');
                html.push('<li >'+pageCount+'</li>');    
            }else{
                html.push('<li >1</li>');  
                html.push('<li class="pg-more">...</li>');
                if(pageCount-pageIndex>3){
                    render(pageIndex+1,pageIndex-1);
                    html.push('<li class="pg-more">...</li>');
                    html.push('<li >'+pageCount+'</li>');
                }else{
                    render(pageCount,pageCount-3);
                }
            }
        }
        return html.join("");
    }
    function printTail(){
        var html=[];
        html.push('<li class="pg-next '+(pageIndex==pageCount?"pg-disabled":"")+'">下一页</li>');
        return html.join("");
    }
    function show(){
        container.innerHTML= '<ul>'+printHead()+printBody()+printTail()+'</ul>';
    }
    show();
    bindEvent();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
介绍一下28个JS常用数组方法
May 06 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 #Javascript
Vue响应式原理详解
Apr 18 #Javascript
详解vue-router基本使用
Apr 18 #Javascript
Vue键盘事件用法总结
Apr 18 #Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 #Javascript
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
微信小程序实战之自定义模态弹窗(8)
Apr 18 #Javascript
You might like
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python实现web方式logview的方法
2015/08/10 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
详解django三种文件下载方式
2018/04/06 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
高分子材料个人求职信范文
2013/09/25 职场文书
中医药大学市场营销专业自荐信
2013/09/29 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
便利店投资创业计划书
2014/02/08 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
专家推荐信模板
2014/05/09 职场文书
逃课检讨书
2015/01/26 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Python基础之元编程知识总结
2021/05/23 Python
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS