javascript 分页

刚写了一个ASP.NET MVC 3的分页,见到回复的兄弟说有无JQ的分页.

我不太喜欢用JS库,觉得没必为了一点效果拖上一大段JS库代码,尽管可以提高效率,但对编码水平提高无任何帮助.

上图.

上代码

    /*
    分页控件（DEVIN 2011年02月16日）
    
    模版说明：
    标准中文：<span>共：{RecordCount}条 {PageSize}条/页 {CurrentPage}页/{PageCount}页</span> {List}
    标准英文：<span>Page {CurrentPage} of {PageCount} ({RecordCount} items) PageSize：{PageSize}</span> {List}
    使用说明：Global 参数  cn|en 中文|英文
    标记说明：
    {RecordCount}：总记录数，对应参数：RecordCount
    {PageSize}   ：分页数，  对应参数：PageSize
    {CurrentPage}：当前页，  对应参数：CurrentPage
    {PageCount}  ：总页数，无须输入，自动计算
    {List}       ：分页模版，分页详细显示链接
    参数说明：
    RecordCount  ：总记录数
    CurrentPage  ：当前页
    PageSize     ：分页数
    ControlId    ：代码容器ID
    Attach       ：附加参数（以 , 开头，多个以 , 分隔，字符串用''隔开）例：",2"，"2,'中国'"
    Template     ：可按模版说明编辑模版，为空或无则使用标准模版
    Global       ：语言，cn|en 中文|英文
    Callback     ：脚本方法
    */
    String.prototype.format = function() {
        var args = arguments;
        return this.replace(/\{(\d+)\}/g, function(m, i) {
            return args[i];
        });
    };
    String.prototype.urlParameterClear = function() {
        var url = location.href.replace(new RegExp(this + "=[^&]*", "gi"), "").replace(/&&/g, "&").replace(/\?&/, "?");
        return !url.match(/\?/g) ? url + "?" : !url.match(/(&|\?)$/) ? url + "&" : url;

    };
    String.prototype.urlRequst = function() {
        var url = location.href;
        var str = "[\?&]" + this + "=([^&]*)";
        var re = new RegExp(str, "gi");
        if (!re.test(url)) return "";
        re.exec(url);
        return RegExp.$1;

    };
    function Pagination(ini) {
        var $ = this;
        for (var o in ini) {
            $[o] = ini[o];
        }
        var en = $.Global && $.Global == 'en';
        $.Template = $.Template ? $.Template : !en ? '<span>共：{RecordCount}条 {PageSize}条/页 {CurrentPage}页/{PageCount}页</span> {List}' : '<span>Page {CurrentPage} of {PageCount} ({RecordCount} items) PageSize：{PageSize}</span> {List}';
        $.CurrentPage = parseInt($.Callback ? $.CurrentPage : $.Separator.urlRequst());
        $.CurrentPage = $.CurrentPage || 1;
        $.TotalPags = Math.ceil($.RecordCount / $.PageSize);
        $.RecordCount = parseInt($.RecordCount);

        if ($.TotalPags <= 10 || $.CurrentPage <= 3) {
            $.index = 1;
            $.endPage = 10 > $.TotalPags ? $.TotalPags : 10;
        }
        else {
            if ($.TotalPags - $.CurrentPage <= 7) {
                $.index = $.TotalPags - 9;
                $.endPage = $.TotalPags;
            } else {
                $.index = $.CurrentPage - 2;
                $.endPage = $.CurrentPage + 7;
            }
        }
        var s = [];
        var url = $.Callback ? 'javascript:{0}('.format($.Callback) : '{0}{1}='.format($.Separator.urlParameterClear(), $.Separator);
        var bracket = $.Callback ? ')' : '';
        if ($.CurrentPage > 1) {
            s.push('<a href="{0}1{1}{2}" title="{4}"><<</a> <a href="{0}{3}{1}{2}" title="{5}"><</a> '.format(url, $.Callback ? $.Attach : '', bracket, $.CurrentPage - 1, en ? 'first' : '首页', en ? 'previous' : '上一页'));
        }
        for (var i = $.index; i <= $.endPage; i++) {
            s.push($.CurrentPage == i ? '<a class="curr">{0}</a> '.format(i) : '<a href="{0}{3}{1}{2}" title="{4}">{3}</a> '.format(url, $.Callback ? $.Attach : '', bracket, i, en ? 'page:{0}'.format(i) : '第{0}页'.format(i)));
        }
        if ($.TotalPags > $.CurrentPage) {
            s.push('<a href="{0}{3}{1}{2}" title="{5}">></a> <a href="{0}{6}{1}{2}" title="{4}">>></a>'.format(url, $.Callback ? $.Attach : '', bracket, $.CurrentPage + 1, en ? 'end' : '末页', en ? 'next' : '下一页', $.TotalPags));
        }

        var html = $.Template;
        html = html.replace("{RecordCount}", $.RecordCount).replace("{PageSize}", $.PageSize).replace("{PageCount}", $.TotalPags).replace("{CurrentPage}", $.CurrentPage).replace('{List}', s.join(''));

        var o = document.getElementById($.ControlId);
        if (o) {
            o.innerHTML = html;
        }
    }

本段JS支持javascript涵数回调方式和URL附加参数方式,调用方法如下

1.javascript涵数回调方式

//示例（Javascript 涵数回调方式）-----------------------------
2   function XO(p, t, c) {
3 //执行 AJAX 数据调用方法
4   //并显示返回数据
5   // p为当前页
6   //调用分页方法
7   new Pagination({
8 RecordCount: 2000,
9 CurrentPage: p,
10 PageSize: 4,
11 ControlId: "x",
12 Attach: ",2,'中国'",
13 Template: "",
14 Global: "cn",
15 Separator: 'page',
16 Callback: "XO"
17 });
18 }
19 //初使为调用第6页
20 XO(6);

2.URL附加参数方式

//示例（URL 附加参数方式）-----------------------------
2 new Pagination({
3 RecordCount: 2000,
4 PageSize: 4,
5 ControlId: "o",
6 Template: "",
7 Global: "en",
8 Separator: 'page'
9 });

两者调用的区别在于有无"Callback" 这个参数.

演示地址:点我演示

代码下载:点我下载