你的位置:首页 > ASP.net教程

[ASP.net教程]基于Jquery+Ajax+Json+存储过程 高效分页


 1 CREATE PROCEDURE [dbo].[PAGINATION]  2 @FEILDS VARCHAR(1000),--要显示的字段 3 @PAGE_INDEX INT,--当前页码 4 @PAGE_SIZE INT,--页面大小 5 @ORDERTYPE BIT,--当为0时 则为 desc 当为1 时 asc 6 @ANDWHERE VARCHAR(1000)='',--where语句 不用加where 7 @ORDERFEILD VARCHAR(100), --排序的字段 8 @TABLENAME VARCHAR(100) --查询的表明 9 10 as11 DECLARE @EXECSQL VARCHAR(2000)12 DECLARE @ORDERSTR VARCHAR(100)13 DECLARE @ORDERBY VARCHAR(100)14 BEGIN15   set NOCOUNT on16   IF @ORDERTYPE = 1 17     BEGIN18       SET @ORDERSTR = ' > ( SELECT MAX(['+@ORDERFEILD+'])'19       SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' ASC'20     END21   ELSE 22     BEGIN23       SET @ORDERSTR = ' < ( SELECT MIN(['+@ORDERFEILD+'])'24       SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' DESC'25     END26   IF @PAGE_INDEX = 1 --当页码是第一页时直接运行,提高速度27     BEGIN28       IF @ANDWHERE=''29         SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM '+@TABLENAME+' '+@ORDERBY30       ELSE31         SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM '+@TABLENAME+' WHERE '+@ANDWHERE+' '+ @ORDERBY32     END33   ELSE34     BEGIN35       IF @ANDWHERE=''36         BEGIN   --以子查询结果当做新表时 要给表名别名才能用37           SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM '+@TABLENAME+' WHERE '+@ORDERFEILD+38                 @ORDERSTR+' FROM (SELECT TOP '+STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+39                 ' FROM '+@TABLENAME+' '+@ORDERBY+') AS TEMP) '+ @ORDERBY40         END41       ELSE42         BEGIN43           SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM '+@TABLENAME+' WHERE '+@ORDERFEILD+44                 @ORDERSTR+' FROM (SELECT TOP '+ STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+45                 ' FROM '+@TABLENAME+' WHERE '+@ANDWHERE+' '+@ORDERBY+') AS TEMP) AND '+@ANDWHERE+' '+ @ORDERBY46         END47     END48 EXEC (@EXECSQL)--这里要加括号49 END

<style type="text/css">a,area  { -moz-outline-style: none; blr:expression(this.onFocus=this.blur()); text-decoration:none} div.badoo { padding:20px; text-align:center; }div.badoo a { border:1px solid #ededed; padding:10px 13px; color:#333333; border-radius:2px; margin-right:3px;}div.badoo a:hover {border:1px solid #ff5a00; color: #ff5a00; }div.badoo a:active {border:1px solid #ff5a00; margin-right:3px;}div.badoo span { border:1px solid #EDEDED; padding:10px 13px; color:#f00;font-weight:bold; background:#FAFAFA; border-radius:2px; margin-right:3px;}div.badoo span.disabled { border:1px solid #EDEDED; padding:10px 13px; color:#000; margin-right:3px; font-weight:100;}</style>

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 = 0;        int.TryParse(new BLL.t_profit().SelectAllNum(), out count);        context.Response.Write(count);        context.Response.End();      }      //当根据索引获取数据      else      {        int currentPageIndex = 1;        int.TryParse(pageIndex, out currentPageIndex);        SqlParameter[] parms = new SqlParameter[] {     new SqlParameter("@FEILDS",SqlDbType.NVarChar,1000),    new SqlParameter("@PAGE_INDEX",SqlDbType.Int,10),    new SqlParameter("@PAGE_SIZE",SqlDbType.Int,10),    new SqlParameter("@ORDERTYPE",SqlDbType.Int,2),    new SqlParameter("@ANDWHERE",SqlDbType.VarChar,1000),    new SqlParameter("@ORDERFEILD",SqlDbType.VarChar,100)    };        parms[0].Value = "id,name,sex,tel";//获取所有的字段        parms[1].Value = pageIndex;//当前页面索引        parms[2].Value = 20;//页面大小        parms[3].Value = 0;//升序排列        parms[4].Value = "";//条件语句        parms[5].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[0].ToString(), name = sdr[1].ToString(), sex = sdr[2].ToString(), tel = sdr[3].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:20px; text-align:center; }div.badoo a { border:1px solid #ededed; padding:10px 13px; color:#333333; border-radius:2px; margin-right:3px;}div.badoo a:hover {border:1px solid #ff5a00; color: #ff5a00; }div.badoo a:active {border:1px solid #ff5a00; margin-right:3px;}div.badoo span { border:1px solid #EDEDED; padding:10px 13px; color:#f00;font-weight:bold; background:#FAFAFA; border-radius:2px; margin-right:3px;}div.badoo span.disabled { border:1px solid #EDEDED; padding:10px 13px; color:#000; margin-right:3px; font-weight:100;}</style>

<script type="text/javascript">    $(function () {      $.post("GetData.ashx", null, function (data) {        var total = data;        PageClick(1, total, 2);      });      PageClick = function (pageIndex, total, spanInterval) {        $.ajax({          url: "GetData.ashx",          data: { "PageIndex": pageIndex },          type: "post",          dataType: "json",          success: function (data) {            //索引从1开始            //将当前页索引转为int类型            var intPageIndex = parseInt(pageIndex);            //获取显示数据的表格            var table = $("#content");            //清楚表格中内容            $("#content tr").remove();            //向表格中添加内容            for (var i = 0; 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 % 10 == 0) pageS = pageS / 20;            else pageS = parseInt(total / 20) + 1;            var $pager = $("#pager");            //清楚分页div中的内容            $("#pager span").remove();            $("#pager a").remove();            //添加第一页            if (intPageIndex == 1) {            //  $pager.append("<span class='disabled'>第一页</span>");            }            else {            //  var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () {             //   PageClick($(this).attr('first'), total, spanInterval);             //   return false;            //  });            //  $pager.append(first);            }            //添加上一页            if (intPageIndex == 1)              $pager.append("<span class='disabled'>上一页</span>");            else {              var pre = $("<a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'>上一页</a>").click(function () {                PageClick($(this).attr('pre'), total, spanInterval);                return false;              });              $pager.append(pre);            }            //设置分页的格式 这里可以根据需求完成自己想要的结果            var interval = parseInt(spanInterval); //设置间隔            var start = Math.max(1, intPageIndex - interval); //设置起始页            var end = Math.min(intPageIndex + interval, pageS)//设置末页            if (intPageIndex < interval + 1) {              end = (2 * interval + 1) > pageS ? pageS : (2 * interval + 1);            }            if ((intPageIndex + interval) > pageS) {              start = (pageS - 2 * interval) < 1 ? 1 : (pageS - 2 * interval);            }            //生成页码            for (var j = start; j < end + 1; j++) {              if (j == intPageIndex) {                var spanSelectd = $("<span class='current'>" + j + "</span>");                $pager.append(spanSelectd);              } //if               else {                var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () {                  PageClick($(this).text(), total, spanInterval);                  return false;                });                $pager.append(a);              } //else            } //for            //上一页            if (intPageIndex == Math.ceil(total / 20)) {              $pager.append("<span class='disabled'>下一页</span>");            }            else {              var next = $("<a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'>下一页</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(0)' 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);      }    }