zoukankan      html  css  js  c++  java
  • asp.net分页效果实现(使用js) DoTop

    效果如图:

    代码如下:

    //分页
    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(当前页)。

      

  • 相关阅读:
    [转]狼的故事8:生存就是坚持
    [转]狼的故事7:单枪匹马的代价
    如何在GridView的Footer内显示总计?
    javascript中如何正确将日期(Date)字符串转换为日期(Date)对象?
    无限级分类(非递归算法/存储过程版/GUID主键)完整数据库示例_(1)表结构
    [转]狼的故事12:王者的风范
    [转]狼的故事2:光线背后的嚎叫
    vs.net2008正式版发布并提供下载(英文版)
    [转]狼的故事11:以牙还牙
    [转]狼的故事3:百分之百的死亡
  • 原文地址:https://www.cnblogs.com/zizaisuixin/p/2604850.html
Copyright © 2011-2022 走看看