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 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
php UTF8 文件的签名问题
2009/10/30 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
js 操作符汇总
2014/11/08 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
JS实现密码框效果
2020/09/10 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python 异常处理的实例详解
2017/09/11 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014年教研员工作总结
2014/12/23 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
利用Apache Common将java对象池化的问题
2022/06/16 Servers