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 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
模拟用户点击弹出新页面不会被浏览器拦截
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 日漫
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
js取得url地址参数实例
2013/02/22 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python常用小技巧总结
2015/06/01 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
食品安全检查制度
2014/02/03 职场文书
避暑山庄导游词
2015/02/04 职场文书
四年级作文之植物
2019/09/20 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
一起来学习Python的元组和列表
2022/03/13 Python