首页 > 编程 > C# > 正文

Jquery+Ajax+Json+存储过程实现高效分页

2020-01-24 01:34:06
字体:
来源:转载
供稿:网友

之前在做分页时,很多朋友都是用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+存储过程实现高效分页的全部内容,希望大家喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表