之前在做分頁時,很多朋友都是用Jquery分頁插件,之前我就用的jquery.paper,有需要的朋友可以聯系我,接下來小編給大家分享用Jquery+Ajax+Json+存儲過程實現高效分頁。
實現此功能用分頁存儲過程,pagination,js樣式,廢話不多了,具體請看下面代碼
分頁存儲過程:PAGINATION
CREATE PROCEDURE [dbo].[PAGINATION] @FEILDS VARCHAR(),--要顯示的字段 @PAGE_INDEX INT,--當前頁碼 @PAGE_SIZE INT,--頁面大小 @ORDERTYPE BIT,--當為時 則為 desc 當為 時 asc @ANDWHERE VARCHAR()='',--where語句 不用加where @ORDERFEILD VARCHAR(), --排序的字段 @TABLENAME VARCHAR() --查詢的表明 as DECLARE @EXECSQL VARCHAR() DECLARE @ORDERSTR VARCHAR() DECLARE @ORDERBY VARCHAR() BEGIN set NOCOUNT on IF @ORDERTYPE = BEGIN SET @ORDERSTR = ' > ( SELECT MAX(['+@ORDERFEILD+'])' SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' ASC' END ELSE BEGIN SET @ORDERSTR = ' < ( SELECT MIN(['+@ORDERFEILD+'])' SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' DESC' END IF @PAGE_INDEX = --當頁碼是第一頁時直接運行,提高速度 BEGIN IF @ANDWHERE='' SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM '+@TABLENAME+' '+@ORDERBY ELSE SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM '+@TABLENAME+' WHERE '+@ANDWHERE+' '+ @ORDERBY END ELSE BEGIN IF @ANDWHERE='' BEGIN --以子查詢結果當做新表時 要給表名別名才能用 SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM '+@TABLENAME+' WHERE '+@ORDERFEILD+ @ORDERSTR+' FROM (SELECT TOP '+STR(@PAGE_SIZE*(@PAGE_INDEX-))+' '+@ORDERFEILD+ ' FROM '+@TABLENAME+' '+@ORDERBY+') AS TEMP) '+ @ORDERBY END ELSE BEGIN SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM '+@TABLENAME+' WHERE '+@ORDERFEILD+ @ORDERSTR+' FROM (SELECT TOP '+ STR(@PAGE_SIZE*(@PAGE_INDEX-))+' '+@ORDERFEILD+ ' FROM '+@TABLENAME+' WHERE '+@ANDWHERE+' '+@ORDERBY+') AS TEMP) AND '+@ANDWHERE+' '+ @ORDERBY END END EXEC (@EXECSQL)--這里要加括號 END
分頁樣式:
<style type="text/css">a,area  { -moz-outline-style: none; blr:expression(this.onFocus=this.blur()); text-decoration:none} div.badoo { padding:px; text-align:center; }div.badoo a { border:px solid #ededed; padding:px px; color:#; border-radius:px; margin-right:px;}div.badoo a:hover {border:px solid #ffa; color: #ffa; }div.badoo a:active {border:px solid #ffa; margin-right:px;}div.badoo span { border:px solid #EDEDED; padding:px px; color:#f;font-weight:bold; background:#FAFAFA; border-radius:px; margin-right:px;}div.badoo span.disabled { border:px solid #EDEDED; padding:px px; color:#; margin-right:px; font-weight:;}</style>首先創建一般處理程序,讀取數據庫中內容,得到返回值. 
創建文件,GetData.ashx. 
我這里是用的存儲過程,存儲過程會再下面粘出來,至于數據只是實例,你們可根據需求自行讀取數據 
using System;using System.Web;using System.Data.SqlClient;using System.Data;using System.Collections.Generic;using System.Web.Script.Serialization;using Model;context.Response.ContentType = "text/plain";      var pageIndex = context.Request["PageIndex"];      //判斷當前索引存不存在,如果不存在則獲取記錄的總數。      if (string.IsNullOrEmpty(pageIndex))      {        //獲取查詢記錄總數的sql語句        int count = ;        int.TryParse(new BLL.t_profit().SelectAllNum(), out count);        context.Response.Write(count);        context.Response.End();      }      //當根據索引獲取數據      else      {        int currentPageIndex = ;        int.TryParse(pageIndex, out currentPageIndex);        SqlParameter[] parms = new SqlParameter[] {     new SqlParameter("@FEILDS",SqlDbType.NVarChar,),    new SqlParameter("@PAGE_INDEX",SqlDbType.Int,),    new SqlParameter("@PAGE_SIZE",SqlDbType.Int,),    new SqlParameter("@ORDERTYPE",SqlDbType.Int,),    new SqlParameter("@ANDWHERE",SqlDbType.VarChar,),    new SqlParameter("@ORDERFEILD",SqlDbType.VarChar,)    };        parms[].Value = "id,name,sex,tel";//獲取所有的字段        parms[].Value = pageIndex;//當前頁面索引        parms[].Value = ;//頁面大小        parms[].Value = ;//升序排列        parms[].Value = "";//條件語句        parms[].Value = "id";//排序字段        List<Book> list = new List<Book>();        using (SqlDataReader sdr = Yoodor.DAL.SqlHelper.ExecuteReader(CommandType.StoredProcedure, "PAGINATION", parms))        {          while (sdr.Read())          {            list.Add(new Book { id = sdr[].ToString(), name = sdr[].ToString(), sex = sdr[].ToString(), tel = sdr[].ToString() });          }        }        context.Response.Write(new JavaScriptSerializer().Serialize(list).ToString());//轉為Json格式      } public string id { get; set; }    public string name { get; set; }     public string sex { get; set; }    public string tel { get; set; }樣式代碼:
<style type="text/css">a,area  { -moz-outline-style: none; blr:expression(this.onFocus=this.blur()); text-decoration:none} div.badoo { padding:px; text-align:center; }div.badoo a { border:px solid #ededed; padding:px px; color:#; border-radius:px; margin-right:px;}div.badoo a:hover {border:px solid #ffa; color: #ffa; }div.badoo a:active {border:px solid #ffa; margin-right:px;}div.badoo span { border:px solid #EDEDED; padding:px px; color:#f;font-weight:bold; background:#FAFAFA; border-radius:px; margin-right:px;}div.badoo span.disabled { border:px solid #EDEDED; padding:px px; color:#; margin-right:px; font-weight:;}</style>js代碼
<script type="text/javascript">    $(function () {      $.post("GetData.ashx", null, function (data) {        var total = data;        PageClick(, total, );      });      PageClick = function (pageIndex, total, spanInterval) {        $.ajax({          url: "GetData.ashx",          data: { "PageIndex": pageIndex },          type: "post",          dataType: "json",          success: function (data) {            //索引從開始            //將當前頁索引轉為int類型            var intPageIndex = parseInt(pageIndex);            //獲取顯示數據的表格            var table = $("#content");            //清楚表格中內容            $("#content tr").remove();            //向表格中添加內容            for (var i = ; i < data.length; i++) {              table.append(                $("<tr><td>" +                data[i].id                + "</td><td>" +                data[i].name                + "</td><td>" +                data[i].sex                + "</td><td>" +                data[i].tel                + "</td></tr>")                );            } //for            //創建分頁            //將總記錄數結果 得到 總頁碼數            var pageS = total            if (pageS % == ) pageS = pageS / ;            else pageS = parseInt(total / ) + ;            var $pager = $("#pager");            //清楚分頁div中的內容            $("#pager span").remove();            $("#pager a").remove();            //添加第一頁            if (intPageIndex == ) {            //  $pager.append("<span class='disabled'>第一頁</span>");            }            else {            //  var first = $("<a href='javascript:void()' first='" + + "'>第一頁</a>").click(function () {             //   PageClick($(this).attr('first'), total, spanInterval);             //   return false;            //  });            //  $pager.append(first);            }            //添加上一頁            if (intPageIndex == )              $pager.append("<span class='disabled'>上一頁</span>");            else {              var pre = $("<a href='javascript:void()' pre='" + (intPageIndex - ) + "'>上一頁</a>").click(function () {                PageClick($(this).attr('pre'), total, spanInterval);                return false;              });              $pager.append(pre);            }            //設置分頁的格式 這里可以根據需求完成自己想要的結果            var interval = parseInt(spanInterval); //設置間隔            var start = Math.max(, intPageIndex - interval); //設置起始頁            var end = Math.min(intPageIndex + interval, pageS)//設置末頁            if (intPageIndex < interval + ) {              end = ( * interval + ) > pageS ? pageS : ( * interval + );            }            if ((intPageIndex + interval) > pageS) {              start = (pageS - * interval) < ? : (pageS - * interval);            }            //生成頁碼            for (var j = start; j < end + ; j++) {              if (j == intPageIndex) {                var spanSelectd = $("<span class='current'>" + j + "</span>");                $pager.append(spanSelectd);              } //if               else {                var a = $("<a href='javascript:void()'>" + j + "</a>").click(function () {                  PageClick($(this).text(), total, spanInterval);                  return false;                });                $pager.append(a);              } //else            } //for            //上一頁            if (intPageIndex == Math.ceil(total / )) {              $pager.append("<span class='disabled'>下一頁</span>");            }            else {              var next = $("<a href='javascript:void()' next='" + (intPageIndex + ) + "'>下一頁</a>").click(function () {                PageClick($(this).attr("next"), total, spanInterval);                return false;              });              $pager.append(next);            }            //最后一頁            if (intPageIndex == pageS) {            //  $pager.append("<span class='disabled'>最后一頁</span>");            }            else {             // var last = $("<a href='javascript:void()' last='" + pageS + "'>最后一頁</a>").click(function () {              //  PageClick($(this).attr("last"), total, spanInterval);             //   return false;            //  });             // $pager.append(last);            }          } //sucess        }); //ajax      }; //function    });  //ready  </script><table id="content"></table><div id="pager" class="badoo"></div> /// <summary>    /// Execute a SqlCommand that returns a resultset against the database specified in the connection string     /// using the provided parameters.    /// </summary>    /// <param name="connectionString">一個有效的數據庫連接字符串</param>    /// <param name="cmdType">SqlCommand命令類型 (存儲過程, T-SQL語句, 等等。)</param>    /// <param name="cmdText">存儲過程的名字或者 T-SQL 語句</param>    /// <param name="commandParameters">以數組形式提供SqlCommand命令中用到的參數列表</param>    /// <returns>A SqlDataReader containing the results</returns>    public static SqlDataReader ExecuteReader( CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)    {      SqlCommand cmd = new SqlCommand();      SqlConnection conn = new SqlConnection(connectionString);      // we use a try/catch here because if the method throws an exception we want to       // close the connection throw code, because no datareader will exist, hence the       // commandBehaviour.CloseConnection will not work      try      {        PrepareCommand(cmd, conn, null, cmdType, cmdText, commandParameters);        SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);        cmd.Parameters.Clear();        return rdr;      }      catch (Exception ex)      {        conn.Close();        throw new Exception(ex.Message);      }    }以上就是本文使用Jquery+Ajax+Json+存儲過程實現高效分頁的全部內容,希望大家喜歡。
新聞熱點
疑難解答