jquery实现pager控件示例


Posted in Javascript onApril 09, 2014

js:

$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {
    if (cfg && pageIndex > 0 && pageSize>0) {
        var token = "#" + this.attr("id");
        this.empty();
        var pageFirst = function () {
            $(token).JPager(cfg, 1, pageSize);
        };        var pagePre = function () {
            $(token).JPager(cfg, pageIndex - 1, pageSize);
        };
        var pageLast = function () {
            $(token).JPager(cfg, parseInt($("#_tot").val()), pageSize);
        };
        var pageNext = function () {
            $(token).JPager(cfg, pageIndex + 1, pageSize);
        };
        var pageNumber = function () {
            $(token).JPager(cfg, parseInt($(this).text()), pageSize);
        };
        var pageGo = function () {
            var index = parseInt($("#_pos").val());
            var total = parseInt($("#_tot").val());
            if (index) {
                if (index > total) {
                    $(token).JPager(cfg, total, pageSize);
                }
                else if (index < 1) {
                    $(token).JPager(cfg, 1, pageSize);
                }
                else {
                    $(token).JPager(cfg, index, pageSize);
                }
            }
        };
        var checkGoNumber = function () {
            if (!Number(this.value)) {
                this.value = "";
            }
            else {
                this.value = Number(this.value);
            }
        };
        var initCustomer = function (recordCount) {
            if (cfg.customer) {
                if (cfg.customer.template) {
                    var t = cfg.customer.template;
                    t = t.replace(/\%total\%/gi, Math.ceil(recordCount / pageSize)).replace(/\%current\%/gi, pageIndex).replace(/\%recordCount\%/gi, recordCount).replace(/\%pageSize\%/gi, pageSize);
                    if (cfg.customer.position == "right") {
                        $("#_right").after(t);
                    }
                    else {
                        $("#_left").before(t);
                    }
                }
            }
        };
        var changeState = function (total) {
            if (pageIndex == 1) {
                $("#_first").attr("class", "unable");
                $("#_pre").attr("class", "unable");
            }
            else {
                $("#_first").bind("click", pageFirst).attr("class", "number");
                $("#_pre").bind("click", pagePre).attr("class", "number");
            }
            if (pageIndex == total) {
                $("#_last").attr("class", "unable");
                $("#_next").attr("class", "unable");
            }
            else {
                $("#_last").bind("click", pageLast).attr("class", "number");
                $("#_next").bind("click", pageNext).attr("class", "number");
            }
        };
        var initNumber = function (total, count, current) {
            if (total > 0 && count > 0) {
                if (current < 1) {
                    current = 1;
                }
                if (current > total) {
                    current = total;
                }
                var endIndex = total;
                var startIndex = 1;
                var temp = current + Math.floor(count / 2);
                if (temp < total) {
                    if (temp < count) {
                        endIndex = count;
                    }
                    else {
                        startIndex = temp - count + 1;
                        endIndex = temp;
                    }
                }
                else {
                    if (total > count) {
                        startIndex = total - count + 1;
                    }
                }
                $("#_number").empty();
                for (var i = startIndex; i <= endIndex; i++) {
                    var html = $("<span></span>").text(i).bind("click", pageNumber);
                    if (i == current) {
                        $("#_number").append(html.attr("class", "selected"));
                    }
                    else {
                        $("#_number").append(html.attr("class", "number"));
                    }
                }
            }
        };
        var initPager = function (data) {
            if ($.isArray(data.SearchResult) && data.RecordCount > 0) {
                $(token).append("<span id='_left'><span id='_first' class='spcial'>首页</span> <span id='_pre' class='spcial'>上一页</span></span> <span id='_number'></span><span id='_go'><input id='_pos' type='text'/><input id='_to' type='button' value='GO'/></span> <span id='_right'><span id='_next' class='spcial'>下一页</span> <span id='_last' class='spcial'>末页</span></span><input id='_tot' type='hidden'/>");
                var total = Math.ceil(data.RecordCount / pageSize);
                $("#_tot").val(total);
                $("#_pos").bind("blur", checkGoNumber);
                $("#_to").bind("click", pageGo);
                changeState(total);
                if (cfg.showNumber && cfg.count > 0) {
                    initNumber(total, cfg.count, pageIndex);
                }
                initCustomer(data.RecordCount);
            }
        };
        if (cfg.action) {
            if (cfg.action.url && cfg.action.data) {
                var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf("}")) + ',"pageIndex":' + pageIndex + ',"pageSize":' + pageSize + "}";
                if (cfg.action.callback && $.isFunction(cfg.action.callback)) {
                    $.ajax({
                        type: "post",
                        url: cfg.action.url,
                        dataType: "json",
                        contentType: "text/json",
                        data: d,
                        success: function (data) {
                            initPager(data.d);
                            cfg.action.callback(data.d);
                        }
                    });
                }
                else {
                    $.ajax({
                        type: "post",
                        url: cfg.action.url,
                        dataType: "json",
                        contentType: "text/json",
                        data: d,
                        success: function (data) {
                            initPager(data.d);
                        }
                    });
                }
            }
        }
    }
}
});

css:

#_pos {
    width: 40px;
}
.unable
{
    color: #BCC0BB;
}
.number
{
    margin: 2px;
    color:#0000FF;
    text-decoration:underline; 
}
.selected
{
    margin: 2px;
    color: #FF0000;
    font-weight: bold;
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>分页控件示例</title>
    <link href="CSS/JPager.css" rel="stylesheet" type="text/css" />
    <script src="JS/jquery.min.js" type="text/javascript"></script>
    <script src="JExtension/JPager.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {          
            $("#pager").JPager({ customer:{template:"%cuRRent%"},count: 10, action: { url: "Service/JService.svc/GetPersons", data: '{"name":"zhoulq"}'}, showNumber: true },1,5);
        });        
    </script>
</head>
<body>
<table>
</table>
<div id="pager"></div>
</body>
</html>

wcf:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
namespace JPlugin
{
    [ServiceContract]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class JService
    {
        [OperationContract]
        [WebInvoke]
        public PageObject<Person> GetPersons(string name,int pageIndex,int paseSize)
        {
            return new PageObject<Person>(){RecordCount = 23,SearchResult = new List<Person>(){new Person(){Name="zhpulq",Age = 28},new Person(){Name = "zhouxy",Age = 24}}};
        }
    }

    public class PageObject<T>
    {
        public int RecordCount { get; set; }
        public List<T> SearchResult { get; set; }
    }
}
Javascript 相关文章推荐
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js选项卡的实现方法
Feb 09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
用JS实现飞机大战小游戏
Jun 09 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 #Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 #Javascript
js定时调用方法成功后并停止调用示例
Apr 08 #Javascript
jquery选择器使用详解
Apr 08 #Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 #Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 #Javascript
javascript跨域的4种方法和原理详解
Apr 08 #Javascript
You might like
星际玩家的三大定律
2020/03/04 星际争霸
FCKeditor的安装(PHP)
2007/01/13 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
vue注册组件的几种方式总结
2018/03/08 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
浅谈Django REST Framework限速
2017/12/12 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
面试求职的个人自我评价
2013/11/16 职场文书
员工考核管理制度
2014/02/02 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
七一党日活动总结
2014/07/08 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
音乐教师个人总结
2015/02/06 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2015年预算员工作总结
2015/05/14 职场文书