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去除空格的几种方法
Oct 03 Javascript
jQuery select控制插件
Aug 17 Javascript
js 动态选中下拉框
Nov 26 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
微信小程序实用代码段(收藏版)
Dec 17 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函数
2006/12/06 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
150行Node.js实现的dns代理工具
2019/08/02 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现的重启关机程序实例
2014/08/21 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
python与C互相调用的方法详解
2017/07/14 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
Shell编程面试题
2016/05/29 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
工程质量承诺书
2014/03/27 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
介绍信格式样本
2015/05/05 职场文书
无工作证明怎么写
2015/06/15 职场文书
2019各种承诺书范文
2019/06/24 职场文书
python中的3种定义类方法
2021/11/27 Python