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 相关文章推荐
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
ajax请求前端跨域问题原因及解决方案
Oct 16 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
世界上最短的数字判断js代码
2019/09/09 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
环保标语口号
2014/06/13 职场文书
班级文化标语
2014/06/23 职场文书
场地使用证明模板
2014/10/25 职场文书
普通党员个人整改措施
2014/10/27 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
走进毛泽东观后感
2015/06/04 职场文书
教师节晚会主持词
2015/06/30 职场文书