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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
Javascript生成器(Generator)的介绍与使用
Jan 31 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四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
解析PHP 5.5 新特性
2013/07/02 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
初步探究Python程序的执行原理
2015/04/11 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
三星法国官方网站:Samsung法国
2019/10/31 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
50道外企软件测试面试题
2014/08/18 面试题
晚归检讨书
2014/02/19 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
观看信仰心得体会
2014/09/04 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
党小组鉴定意见
2015/06/02 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python