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 加上最后自己的验证
Nov 04 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
ionic2.0双击返回键退出应用
Sep 17 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
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
javascript读写json示例
2014/04/11 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
Python中一般处理中文的几种方法
2019/03/06 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Pandas分组与排序的实现
2019/07/23 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
乡镇办公室工作决心书
2014/03/11 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
开业庆典致辞
2015/08/01 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书