Asp.net中类似于QQ相册中的分页功能怎么实现？

[liuhongmeiliuqing]

要这样形式的 上一页 1234 下一页，中间的 有多少也是几个数字应该怎么实现？

[wuyq11]

aspnetrpager分页控件

[君望永远]

Listview+Pager控件
纯JS的话可以JQuery
或者ExtJS

[wwfgu00ing]

http://www.open-open.com/ajax/Image.htm

[hongjiaoli]

在Repeater控件内实现分页功能：

页面中代码

<asp:Repeater ID="RptJobList" runat="server" OnItemDataBound="RptJobList_ItemDataBound">

<FooterTemplate>

<td align = "right" height="30" width = "828" colspan="2" style="font-size:10pt;color:#636363;">
<asp:HyperLink colspan="2" style="font-size:10pt;color:#636363;" ID="hlfir" runat="server" Text="第一页"></asp:HyperLink>
 
<asp:HyperLink colspan="2" style="font-size:10pt;color:#636363;" ID="hlp" runat="server" Text="上一页"></asp:HyperLink>
 
<asp:HyperLink colspan="2" style="font-size:10pt;color:#636363;" ID="hln" runat="server" Text="下一页"></asp:HyperLink>
 
<asp:HyperLink colspan="2" style="font-size:10pt;color:#636363;" ID="hlla" runat="server" Text="最后一页"></asp:HyperLink>
    转到第


<asp:DropDownList ID="ddlp" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlp_SelectedIndexChanged" >
</asp:DropDownList>页
</td>

</FooterTemplate>
</asp:Repeater>

.CS代码：

数据绑定函数[自己补充完整即可]

PagedDataSource pds = new PagedDataSource();
pds.DataSource = dt.DefaultView;
pds.AllowPaging = true;//允许分页
pds.PageSize = 20;//单页显示项数
pds.CurrentPageIndex = Convert.ToInt32(Request.QueryString["page"]);

/// <summary>
/// Repeater控件分页 处理
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void RptJobList_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Footer)
{
DropDownList ddlp = (DropDownList)e.Item.FindControl("ddlp");

HyperLink lpfirst = (HyperLink)e.Item.FindControl("hlfir");
HyperLink lpprev = (HyperLink)e.Item.FindControl("hlp");
HyperLink lpnext = (HyperLink)e.Item.FindControl("hln");
HyperLink lplast = (HyperLink)e.Item.FindControl("hlla");
PagedDataSource ps = pds();
string a1 = Request.QueryString["page"];
ps.CurrentPageIndex = Convert.ToInt32(a1);

int n = Convert.ToInt32(ps.PageCount);//n为分页数
int i = Convert.ToInt32(ps.CurrentPageIndex);//i为当前页

Label lblpc = (Label)e.Item.FindControl("lblpc");

//if (!IsPostBack)
//{
for (int j = 0; j < n; j++)
{
ddlp.Items.Add(Convert.ToString(j + 1));
}
//}

string addUrl = "&&testType=" + ddlWorkType.SelectedValue + "&&provinceId=" + ddlProvince.SelectedValue + "&&jobclassId" + ddlJobclass.SelectedValue;
if (i <= 0)
{
lpfirst.Enabled = false;
lpprev.Enabled = false;
lplast.Enabled = true;
lpnext.Enabled = true;
}
else
{
lpprev.NavigateUrl = "?page=" + (i - 1) + addUrl;
}
if (i >= n - 1)
{
lpfirst.Enabled = true;
lplast.Enabled = false;
lpnext.Enabled = false;
lpprev.Enabled = true;
}
else
{
ViewState["i"] = i;
lpnext.NavigateUrl = "?page=" + (i + 1) + addUrl;
}

lpfirst.NavigateUrl = "?page=0" + addUrl; //向本页传递参数page
lplast.NavigateUrl = "?page=" + (n - 1) + addUrl;

ddlp.SelectedIndex = Convert.ToInt32(ps.CurrentPageIndex);//更新下拉列表框中的当前选中页序号
}
}

/// <summary>
/// 转到第N页
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ddlp_SelectedIndexChanged(object sender, EventArgs e)
{
//脚模板中的下拉列表框更改时激发
string pg = Convert.ToString((Convert.ToInt32(((DropDownList)sender).SelectedValue) - 1));//获取列表框当前选中项
ViewState["pageCount"] = pg;//
Response.Redirect("parttime_joblist.aspx?page=" + pg + "&&testType=" + ddlWorkType.SelectedValue + "&&provinceId=" + ddlProvince.SelectedValue + "&&jobclassId" + ddlJobclass.SelectedValue); //页面转向
}



本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/hongjiaoli/archive/2010/09/20/5897585.aspx

[孟子E章]

参见
http://dotnet.aspx.cc/file/Add-Delete-Update-Edit-Data-With-Paging-in-GridView.aspx

[fellowcheng]

/*ul pagination*/

jQuery.fn.paging = function(pageOptions, togglefn, options) {
    pageOptions = jQuery.extend({
        page_size: 5,
        num_display_entries: 5,
        page_id: 0,
        total_count: 10,
        prev_text: "<",
        next_text: ">",
        first_text: "<<",
        last_text: ">>",
        parentTag: "<div/>",
        itemTag: "<label/>",
        separator: "",
        containerClass: "AlbumPhotoPage",
        hrefPattern: "",
        pageFlag: "{index}"
    }, pageOptions || {});
    var parent = this;
    var divPages = $(pageOptions.parentTag).attr("class", pageOptions.containerClass);
    var pages = 0;
    var targeturl = null;
    var nohref = "#";

    var isAjax = pageOptions.hrefPattern.length == 0;
    if (isAjax) {
        targeturl = "javascript:void(0)";
    } else {
        targeturl = pageOptions.hrefPattern;
    }

    var lblSeparator = undefined;
    if (pageOptions.separator.length > 0) {
        lblSeparator = pageOptions.separator;
    }

    if (pageOptions.total_count > pageOptions.page_size) {

        pages = Math.ceil(pageOptions.total_count / pageOptions.page_size);
        var lblFirst = $(pageOptions.itemTag);
        if (pageOptions.page_id == "1") {
            $("<a href='#' disabled=\"true\">" + pageOptions.first_text + "</a>").appendTo(lblFirst);
        }
        else {
            if (isAjax) {
                $("<a href='" + nohref + "'>" + pageOptions.first_text + "</a>").appendTo(lblFirst);
                lblFirst.click(function() { return options != null ? togglefn(options, 1) : togglefn(1); });
            }
            else
                $("<a href='" + targeturl.replace(pageOptions.pageFlag, 1) + "'>" + pageOptions.first_text + "</a>").appendTo(lblFirst);
        }
        lblFirst.appendTo(divPages);
        if (lblSeparator)
            $(lblSeparator).appendTo(divPages);
        var prevPg = pageOptions.page_id > 1 ? pageOptions.page_id - 1 : pageOptions.page_id;
        var lblPrev = $(pageOptions.itemTag);
        if (pageOptions.page_id == prevPg) {
            $("<a href='" + nohref + "' disabled=\"true\">" + pageOptions.prev_text + "</a>").appendTo(lblPrev);
        }
        else {
            if (isAjax) {
                $("<a href='" + nohref + "'>" + pageOptions.prev_text + "</a>").appendTo(lblPrev);
                lblPrev.click(function() { return options != null ? togglefn(options, prevPg) : togglefn(prevPg); });
            }
            else
                $("<a href='" + targeturl.replace(pageOptions.pageFlag, prevPg) + "'>" + pageOptions.prev_text + "</a>").appendTo(lblPrev);
        }
        lblPrev.appendTo(divPages);
        if (lblSeparator)
            $(lblSeparator).appendTo(divPages);
        if (pageOptions.num_display_entries % 2 == 0) {
            pageOptions.num_display_entries += 1;
        }
        if (pages > pageOptions.num_display_entries) {
            var ne_half = Math.ceil((pageOptions.num_display_entries - 1) / 2);
            var startIdx = 1, endIdx = 5;
            var upper_limit = pages - pageOptions.num_display_entries;
            startIdx = pageOptions.page_id > ne_half ? Math.max(Math.min(pageOptions.page_id - ne_half, upper_limit), 0) : 0;
            endIdx = pageOptions.page_id > ne_half ? Math.min(pageOptions.page_id + ne_half, pages) : Math.min(pageOptions.num_display_entries, pages);
            if (startIdx == 0)
                startIdx = 1;

            //add front "..."
            if (pageOptions.page_id - 1 > pageOptions.num_display_entries || startIdx > 1) {
                var prevsp = pageOptions.page_id - pageOptions.num_display_entries;
                if (prevsp < 1)
                    prevsp = 1;
                var lnksp = null;
                if (isAjax) {
                    lnksp = $("<a href='" + nohref + "'>...</a>");
                    lnksp.click(function() { return options != null ? togglefn(options, prevsp) : togglefn(prevsp); });
                }
                else {
                    lnksp = $("<a href='" + targeturl.replace(pageOptions.pageFlag, prevsp) + "'>...</a>");
                }

                lnksp.appendTo(divPages);
                if (lblSeparator)
                    $(lblSeparator).appendTo(divPages);
            }
            //alert(startIdx + "," + endIdx);
            for (var icnts = startIdx; icnts <= endIdx; icnts++) {
                var lblItem = $(pageOptions.itemTag);
                var lnkHtml = null;
                if (icnts == pageOptions.page_id) {
                    lnkHtml = $("<span style='color:red;' >" + icnts + "</span>");
                }
                else {
                    if (isAjax) {
                        lnkHtml = $("<a href='" + nohref + "'>" + icnts + "</a>");
                        lnkHtml.click(function() { var currenPg = parseInt($(this).text()); return options != null ? togglefn(options, currenPg) : togglefn(currenPg); });
                    }
                    else {
                        lnkHtml = $("<a href='" + targeturl.replace(pageOptions.pageFlag, icnts) + "'>" + icnts + "</a>");
                    }
                }
                lnkHtml.appendTo(lblItem);
                lblItem.appendTo(divPages);
                if (lblSeparator)
                    $(lblSeparator).appendTo(divPages);
            }

            //add back "..."
            if (pageOptions.page_id + pageOptions.num_display_entries < pages || endIdx < pages) {
                var nextsp = pageOptions.page_id + pageOptions.num_display_entries;
                var lnksp2 = null;
                if (isAjax) {
                    lnksp2 = $("<a href='" + nohref + "'>...</a>");
                    lnksp2.click(function() { return options != null ? togglefn(options, nextsp) : togglefn(nextsp); });
                }
                else
                    lnksp2 = $("<a href='" + targeturl.replace(pageOptions.pageFlag, nextsp) + "'>...<a/>");
                lnksp2.appendTo(divPages);
                if (lblSeparator)
                    $(lblSeparator).appendTo(divPages);
            }
        }
        else {
            for (var icnts = 1; icnts <= pages; icnts++) {
                var lblItem = $(pageOptions.itemTag);
                var lnkHtml = null;
                if (icnts == pageOptions.page_id) {
                    lnkHtml = $("<span style='color:red;'>" + icnts + "</span>");
                }
                else {
                    if (isAjax) {
                        lnkHtml = $("<a href='" + nohref + "'>" + icnts + "</a>");
                        lnkHtml.click(function() { var currenPg = parseInt($(this).text()); return options != null ? togglefn(options, currenPg) : togglefn(currenPg); });
                    }
                    else {
                        lnkHtml = $("<a href='" + targeturl.replace(pageOptions.pageFlag, icnts) + "'>" + icnts + "</a>");
                    }
                }
                lnkHtml.appendTo(lblItem);
                lblItem.appendTo(divPages);
                if (lblSeparator)
                    $(lblSeparator).appendTo(divPages);
            }
        }

        var nextPg = pageOptions.page_id < pages ? pageOptions.page_id + 1 : pages;
        var lblNext = $(pageOptions.itemTag);
        if (pageOptions.page_id == nextPg) {
            $("<a href='" + nohref + "' disabled=\"true\">" + pageOptions.next_text + "</a>").appendTo(lblNext);
        }
        else {
            if (isAjax)
                $("<a href='" + nohref + "'>" + pageOptions.next_text + "</a>").click(function() { return options != null ? togglefn(options, nextPg) : togglefn(nextPg); }).appendTo(lblNext);
            else
                $("<a href='" + targeturl.replace(pageOptions.pageFlag, nextPg) + "'>" + pageOptions.next_text + "</a>").appendTo(lblNext);
        }
        lblNext.appendTo(divPages);
        if (lblSeparator)
            $(lblSeparator).appendTo(divPages);

        var lblLast = $(pageOptions.itemTag);
        if (pageOptions.page_id == pages) {
            $("<a href='" + nohref + "' disabled=\"true\">" + pageOptions.last_text + "</a>").appendTo(lblLast);
        }
        else {
            if (isAjax)
                $("<a href='" + nohref + "'>" + pageOptions.last_text + "</a>").click(function() { return options != null ? togglefn(options, pages) : togglefn(pages); }).appendTo(lblLast);
            else
                $("<a href='" + targeturl.replace(pageOptions.pageFlag, pages) + "'>" + pageOptions.last_text + "</a>").appendTo(lblLast);
        }
        lblLast.appendTo(divPages);
        if (lblSeparator)
            $(lblSeparator).appendTo(divPages);

        divPages.appendTo(parent);
    }
}