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 json 新手入门文档
Dec 03 Javascript
来自qq的javascript面试题
Jul 24 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
浅谈es6中的元编程
Dec 01 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php新建文件自动编号的思路与实现
2011/06/27 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
react-router实现按需加载
2017/05/09 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python SQLite3简介
2018/02/22 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
pycharm安装及如何导入numpy
2020/04/03 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
集团薪酬管理制度
2014/01/13 职场文书
小学毕业家长寄语
2014/01/19 职场文书
白血病捐款倡议书
2014/05/14 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
行政介绍信范文
2015/05/04 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
校园安全学习心得体会
2016/01/18 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript