asp.net分頁asp.net無刷新分頁高效率分頁

   項目中經常會用到分頁的功能類似的項目做過無數個了，今個把自己常用的分頁代碼分享一下。

首先說說服務端處理的代碼：

下面代碼中重點是分頁的sql語句的寫法，其中的參數@n是當前的頁碼，總的來說本服務端主要向前台輸出了2個值，接收了一個參數（當前頁碼），輸出的是總的頁數和當前頁碼下的數據。

sql = "select t.* from (select *,ROW_NUMBER() over(order by id asc) rownum from eazy_yiliaofuwu where typeid='"+id+"')t where t.rownum>=(@n-1)*10+1 and t.rownum<=@n*10";
DataTable dt = DbHelperSQL.Query(sql, new SqlParameter("@n", pagenum)).Tables[0];

namespace EazyCMS.Web.tools
{
    /// <summary>
    /// getyaopinfuwu 的摘要說明
    /// </summary>
    public class getyaopinfuwu : IHttpHandler
    {
        private string sql = string.Empty;      
     
        private int total = 0;

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string id = context.Request["id"];
            int pagenum = Convert.ToInt32(context.Request["pagenum"]);

            sql = "select t.* from (select *,ROW_NUMBER() over(order by id asc) rownum from eazy_yiliaofuwu where typeid='"+id+"')t where t.rownum>=(@n-1)*10+1 and t.rownum<=@n*10";
            DataTable dt = DbHelperSQL.Query(sql, new SqlParameter("@n", pagenum)).Tables[0];
            //這里得到的根據條件查詢得到的數據總的條數
            total = Convert.ToInt32(DbHelperSQL.GetSingle("select COUNT(*) from eazy_yiliaofuwu where typeid=" + id));
            Medicalitems medicalitems = new Medicalitems();
            medicalitems.medicalitem = new Medicalitem[dt.Rows.Count];
            medicalitems.PageCount = (int)Math.Ceiling(total / 10.0);//總的頁碼0.1→1 ， 0.95→1， 1.01→2，1.0→1
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                medicalitems.medicalitem[i] = new Medicalitem() { MedicalCode=dt.Rows[i]["ylcode"].ToString(), MedicalContent=dt.Rows[i]["itemcontent"].ToString(), MedicalName=dt.Rows[i]["itemname"].ToString(), MedicalPrice=dt.Rows[i]["price"].ToString(), MedicalUnit=dt.Rows[i]["danwei"].ToString() };
            }
            context.Response.Write(new JavaScriptSerializer().Serialize(medicalitems));

        }
    
       
       
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    class Medicalitems
    {
        public Medicalitem[] medicalitem { get; set; }
        public int PageCount { get; set; }

    }
    class Medicalitem
    {
        public string MedicalCode { get; set; }
        public string MedicalName { get; set; }
        public string MedicalContent { get; set; }
        public string MedicalUnit { get; set; }
        public string MedicalPrice { get; set; }

    }
}

 再來說說前端代碼：

分頁代碼：點此下載       其它分頁插件：點此下載

<script type="text/javascript">
        var id;
        function getdata(v) {
            $("#pageGro").removeAttr("style"); 
            id=v;            
            ShowPage(1);
        }

        function ShowPage(pagenum){
            $.post("../../tools/getyaopinfuwu.ashx", { "id": id,"pagenum":pagenum }, function (data) {

                //根據總頁數判斷，如果小於5頁，則顯示所有頁數，如果大於5頁，則顯示5頁。根據當前點擊的頁數生成
    
                var pageCount = parseInt(data.PageCount);//模擬后台總頁數
                //生成分頁按鈕
                if(pageCount>5){
                    page_icon(1,5,0);
                }else{
                    page_icon(1,pageCount,0);
                }
    
                //點擊分頁按鈕觸發
                $("#pageGro li").live("click",function(){
                    //alert(id);
                    if(pageCount > 5){
                        var pageNum = parseInt($(this).html());//獲取當前頁數
                        pageGroup(pageNum,pageCount);
            

                    }else{
                        $(this).addClass("on");
                        $(this).siblings("li").removeClass("on");
                        var pageNum = parseInt($(this).html());//獲取當前頁數
                        ShowPage2(pageNum);
                    }
                });
    
                //點擊上一頁觸發
                $("#pageGro .pageUp").click(function(){
                    if(pageCount > 5){
                        var pageNum = parseInt($("#pageGro li.on").html());//獲取當前頁
                        pageUp(pageNum,pageCount);
                    }else{
                        var index = $("#pageGro ul li.on").index();//獲取當前頁
                        if(index > 0){
                            $("#pageGro li").removeClass("on");//清除所有選中
                            $("#pageGro ul li").eq(index-1).addClass("on");//選中上一頁
                            var pageNum = parseInt($("#pageGro li.on").html());//獲取當前頁
                            ShowPage2(pageNum);
                        }
                    }
                });
    
                //點擊下一頁觸發
                $("#pageGro .pageDown").click(function(){
                    if(pageCount > 5){
                        var pageNum = parseInt($("#pageGro li.on").html());//獲取當前頁
                        pageDown(pageNum,pageCount);
                    }else{
                        var index = $("#pageGro ul li.on").index();//獲取當前頁
                        if(index+1 < pageCount){
                            $("#pageGro li").removeClass("on");//清除所有選中
                            $("#pageGro ul li").eq(index+1).addClass("on");//選中上一頁
                            var pageNum = parseInt($("#pageGro li.on").html());//獲取當前頁
                            ShowPage2(pageNum);
                        }
                    }
                });


                //頁碼
                var TotalPageNum=data.PageCount;
               
                $("#myui").empty();//首先清空當前容器下面的所有內容                
                var table=data.medicalitem;//這里得到一個數據對象的數組
                for (var i = 0; i < table.length; i++) {
                    var item=table[i];
                    $("<a ><li class=''> <div class='clrfix'><div class='honor_x'> <div class='time'>"+item.MedicalCode+"</div> </div> <div class='honor_n'>"+item.MedicalName+"</div><div class='honor_p'>"+item.MedicalContent+"</div> <div class='honor_n'>"+item.MedicalUnit+"</div>  <div class='honor_c'>"+item.MedicalPrice+" </div> </div></li> </a> ").appendTo("#myui");

                }
                   
                
            },"json");
        
        }



        function ShowPage2(pagenum){
            
            $.post("../../tools/getyaopinfuwu.ashx", { "id": id,"pagenum":pagenum }, function (data) {

                $("#myui").empty();
               
                var table=data.medicalitem;
                for (var i = 0; i < table.length; i++) {
                    var item=table[i];
                    $("<a ><li class=''> <div class='clrfix'><div class='honor_x'> <div class='time'>"+item.MedicalCode+"</div> </div> <div class='honor_n'>"+item.MedicalName+"</div><div class='honor_p'>"+item.MedicalContent+"</div> <div class='honor_n'>"+item.MedicalUnit+"</div>  <div class='honor_c'>"+item.MedicalPrice+" </div> </div></li> </a> ").appendTo("#myui");

                }
                   
                
            },"json");
        
        }
       
    </script>