asp.net分页效果实现(使用js)

效果如图:

代码如下:

//分页
function UpdatePage(jsontext) {
    //总条数(总条数=总页数*页大小)
    var userCount = jsontext.userCount;
    //总页数
    var pagecount = jsontext.pagecount;
    //当前页
    var pindex = jsontext.pindex;

    if (pagecount > 1) {
        sailstr = "<ul class=\"table_page_ul\">";
        if (pindex == 1) {
            sailstr += "";
        }
        else {
            sailstr += "<li class=\"prev\"><a href=\"javascript:void(0)\" onclick=\"GetPage(" + (pindex - 1) + ")\"></a></li>";
        }
        if (Number(pagecount) >= 5) {
            if (pindex == 1) {
                for (var i = 1; i < 6; i++) {
                    if (i == pindex) {
                        sailstr += "<li class=\"numon\"><a href=\"javascript:void(0)\">" + i + "</a></li>";
                    }
                    else {
                        sailstr += "<li class=\"num\"><a href=\"javascript:void(0)\" onclick=\"GetPage(" + i + ")\">" + i + "</a></li>";
                    }
                }
            } else if ((Number(pindex) + 4) - Number(pagecount) > 0) {
                for (var i = Number(pagecount) - 4; i < Number(pagecount) + 1; i++) {
                    if (i == pindex) {
                        sailstr += "<li class=\"numon\"><a href=\"javascript:void(0)\">" + i + "</a></li>";
                    }
                    else {
                        sailstr += "<li class=\"num\"><a href=\"javascript:void(0)\" onclick=\"GetPage(" + i + ")\">" + i + "</a></li>";
                    }
                }
            } else {
                for (var i = (Number(pindex) - 1); i < (Number(pindex) + 4); i++) {
                    if (i == pindex) {
                        sailstr += "<li class=\"numon\"><a href=\"javascript:void(0)\">" + i + "</a></li>";
                    }
                    else {
                        sailstr += "<li class=\"num\"><a href=\"javascript:void(0)\" onclick=\"GetPage(" + i + ")\">" + i + "</a></li>";
                    }
                }
            }
        } else {
            for (var i = 1; i < Number(pagecount) + 1; i++) {
                if (i == pindex) {
                    sailstr += "<li class=\"numon\"><a href=\"javascript:void(0)\">" + i + "</a></li>";
                }
                else {
                    sailstr += "<li class=\"num\"><a href=\"javascript:void(0)\" onclick=\"GetPage(" + i + ")\">" + i + "</a></li>";
                }
            }
        }
        if (pindex == pagecount) {
            sailstr += "</ul>";
        }
        else {
            sailstr += "<li class=\"next\"><a href=\"javascript:void(0)\" onclick=\"GetPage(" + (Number(pindex) + 1) + ")\"></a></li></ul>";
        }

    } else {
        sailstr = "";
    }
    //PageTab是页码显示的div
    $("#PageTab").html(sailstr);
}
//页码单击事件
function GetPage(){
  //写点击页面执行的内容
}

解释:如上代码函数function UpdatePage(jsontext){}为分页的主要部分,函数要传入一json形式的数据。
包括userCount(总条数)、pagecount(总页数)、pindex(当前页)。

  

posted @ 2012-07-23 13:54  DoTop-DoIT  阅读(961)  评论(0编辑  收藏  举报