zoukankan      html  css  js  c++  java
  • asp.net一个非常简单的分页

    分页,也是一个非常常见得需求,以前也用过很多的分页控件,现在自己参照之前用过的,自己总结一个非常简单实用的分页实现方法。具体如下:数据展示用Repeater,分页的话用js切换当前的页码,后台根据当前页码获取数据绑定到Repeater。

    数据列表代码

    <div class="js_celli list">
    <div class="idea_cell_wh" style="overflow: visible">
    <table class="table table-striped table-hover">
    <asp:Repeater ID="SDRepeater" runat="server">
    <HeaderTemplate>
    <tr class="tips_title">
    <th>主题</th>
    <th width="10%">处理状态</th>
    <th width="10%">发帖人</th>
    <th width="10%">时间</th>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr>
    <td class="titletd" title="<%#Eval("Title") %>"><%#Eval("Title") %></td>
    <td><%#Eval("Status")+"" == "" ? "未分派" : Eval("Status") %></td>
    <td><%#Eval("Author") %></td>
    <td><%#DateTime.Parse( Eval("Created")+"").ToString("yyyy-MM-dd hh:mm") %></td>
    </tr>
    </ItemTemplate>
    </asp:Repeater>
    </table>
    </div>
    <div style=" 100%; text-align: center;font-size:18px;color:#ffd800;font-weight:600;" ID="lbMessage" runat="server">
    </div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    分页HTML

    <div class="container" style="text-align: center;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin: 0;">
    <ul id="PagerID" class="pagination pagination-sm">
    <li><a onclick="TurnPage('f')">首页 </a></li>
    <li><a onclick="TurnPage('p')">上页 </a></li>
    <li>
    <span>页:
    <asp:Label ID="lbCurrentPage" runat="server">0</asp:Label>/<asp:Label ID="lbMaxPage" runat="server">0</asp:Label>
    </span>
    </li>
    <li><a onclick="TurnPage('n')">下页 </a></li>
    <li><a onclick="TurnPage('e')">末页 </a></li>
    <li><a onclick="TurnPage('a')">GoTo </a></li>
    <li>
    <input type="text" id="txtInputNumber" style=" 50px;"></li>
    </ul>
    </div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    分页JS

    function TurnPage(type) {
    var currentPage = getQueryString("currentPage") == null ? 1 : parseInt(getQueryString("currentPage"));
    var maxPage = <%=maxPage%>;

    switch (type) {
    case 'f':
    currentPage = 1;
    break;
    case 'p':
    if (currentPage <= 1) {
    return;
    }
    else {
    currentPage = currentPage - 1;
    }
    break;
    case 'n':
    if (currentPage >= maxPage) {
    return;
    }
    else {
    currentPage = currentPage + 1;
    }
    break;
    case 'e':
    if(currentPage == maxPage)return;
    currentPage = maxPage;
    break;
    case 'a':
    if ( isNaN(parseInt(document.getElementById("txtInputNumber").value))) {
    return;
    } else if (parseInt(document.getElementById("txtInputNumber").value) > maxPage) {
    alert("没有那么多页");
    return;
    } else {
    currentPage = parseInt(document.getElementById("txtInputNumber").value);
    }
    break;
    default:
    break;
    }

    if(!isNaN(currentPage) && currentPage > 0)
    {
    location.href = "?currentPage=" + currentPage;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    分页样式

    ul.pagination {
    display: inline-block;
    }

    .pagerlist {
    float: left;
    margin-left: 40%;
    }

    .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    }

    .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    }

    ul.pagination li {
    float: left;
    margin-right: 5px;
    border: #e2e2e2 1px solid;
    }

    .pagination > li {
    display: inline;
    cursor: pointer;
    }

    .pagination > li:first-child > a, .pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    }

    ul.pagination li a, ul.pagination li a:link, ul.pagination li a:visited {
    display: block;
    padding: 0 10px;
    line-height: 24px;
    color: #666;
    font-size: 12px;
    text-decoration: none;
    }

    .pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 2px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    后台代码

    //最大页码
    public int maxPage = 0;
    //页数
    int PageSize = 50;
    public SPWeb web = null;
    public bool IsCoordinator = false;

    protected void Page_Load(object sender, EventArgs e)
    {
    web = SPContext.Current.Web;

    int currentPage = 1;
    if (int.TryParse(Request["currentPage"] + "", out currentPage))
    {
    }

    if (currentPage < 1) currentPage = 1;

    DataTable dt = GetSDData();
    if (dt != null && dt.Rows.Count > 0)
    {
    lbMessage.Disabled = false;
    maxPage = (int)Math.Ceiling(dt.Rows.Count / (double)PageSize);

    lbCurrentPage.Text = currentPage + "";
    lbMaxPage.Text = maxPage + "";

    SDRepeater.DataSource = Common.GetPagedTable(dt, currentPage, PageSize);
    SDRepeater.DataBind();
    }
    else
    {
    lbMessage.Disabled = true;
    lbMessage.InnerText = " ----- no data ----- ";
    }

    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    获取当前页的数据

    /// <summary>
    /// DataTable分页
    /// </summary>
    /// <param name="dt">DataTable</param>
    /// <param name="PageIndex">PageIndex表示第几页</param>
    /// <param name="PageSize">PageSize表示每页的记录数</param>
    /// <returns></returns>
    public static DataTable GetPagedTable(DataTable dt, int PageIndex, int PageSize)
    {
    DataTable newdt = dt.Copy();
    newdt.Clear();

    int rowbegin = (PageIndex - 1) * PageSize;
    int rowend = PageIndex * PageSize;

    if (rowbegin >= dt.Rows.Count)
    return newdt;

    if (rowend > dt.Rows.Count)
    rowend = dt.Rows.Count;
    for (int i = rowbegin; i <= rowend - 1; i++)
    {
    DataRow newdr = newdt.NewRow();
    DataRow dr = dt.Rows[i];
    foreach (DataColumn column in dt.Columns)
    {
    newdr[column.ColumnName] = dr[column.ColumnName];
    }
    newdt.Rows.Add(newdr);
    }
    return newdt;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    点赞 1
    ————————————————
    版权声明:本文为CSDN博主「郑小晨」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/u012835032/article/details/80538155

  • 相关阅读:
    博客园设置自定义页面[布局][样式]
    linux的hostname文件目录
    mybatis底层源码分析之--配置文件读取和解析
    Enum的使用
    easyUI datagrid笔记
    软工实践第二次作业-黄紫仪
    软工实践第一次作业-黄紫仪
    第五次作业--原型设计
    作业三
    作业二
  • 原文地址:https://www.cnblogs.com/pegasus827/p/12206964.html
Copyright © 2011-2022 走看看