当前位置: 首页 > 编程笔记 >

.NET分页控件简单学习

萧宏远
2023-03-14
本文向大家介绍.NET分页控件简单学习,包括了.NET分页控件简单学习的使用技巧和注意事项,需要的朋友参考一下

这几天无意间看到一个关于分页的帖子,觉得写得挺好的。关于这些东西,自己一直都是只知道原理,却没有真正动手做过,于是研究了一下分页的原理自己动手写了一个十分特别非常简单的分页程序,在这里与大家分享一下。 

这个程序取数据使用的ado.net,首先先新建一个取数据的类PageDAl 

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.Common;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

namespace page.DAL
{
  public class PageDal
  {
    public DataTable GetUserList(out int totalCount, int pageIndex = 1, int pagesize = 10)
    {
      using (
        SqlConnection coon =
          new SqlConnection(ConfigurationManager.ConnectionStrings["userConnection"].ConnectionString))
      {
        coon.Open();
        string sqlCount = "select count(F_Id) from Sys_User";
        SqlCommand cmd = new SqlCommand(sqlCount, coon);
        totalCount = int.Parse(cmd.ExecuteScalar().ToString());
        string sql = "select F_Account,F_RealName from (select *,Row_Number() over(order by F_Account) r from Sys_User)as w where r>{0} and r<={1};";
        SqlDataAdapter ad = new SqlDataAdapter(String.Format(sql, (pageIndex - 1) * pagesize, (pageIndex * pagesize)), coon);
        DataTable dt = new DataTable();
        ad.Fill(dt);

        return dt;
      }
    }
  }
} 

然后记得修改一下webconfig里面的连接数据库的字符串,数据库自己随便建一个就行。

接下来是ashx一般处理程序,html页面把需求传过来,他在从PageDal中取数据。 

using page.DAL;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web;

namespace page
{
  /// <summary>
  /// WebHandler 的摘要说明
  /// </summary>
  public class WebHandler : IHttpHandler
  {
    public void ProcessRequest(HttpContext context)
    {
      try
      {
        int pageIndex = int.Parse(context.Request.Form["pageindex"]);
        int pageSize = int.Parse(context.Request.Form["pagesize"]);
        PageDal pd = new PageDal();
        int totalCount;
        DataTable dt = pd.GetUserList(out totalCount, pageIndex, pageSize);
        string json = ToJson(dt, "data", totalCount);
        context.Response.ContentType = "text/plain";
        context.Response.Write(json);
      }
      catch
      {
        context.Response.Write("error");
      }
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }

    /// <summary>
    /// DataTable转换为Json
    /// </summary>
    public static string ToJson(DataTable dt, string jsonName, int count)
    {
      StringBuilder Json = new StringBuilder();
      if (string.IsNullOrEmpty(jsonName))
        jsonName = dt.TableName;
      Json.Append("{\"" + jsonName + "\":[");
      if (dt.Rows.Count > 0)
      {
        for (int i = 0; i < dt.Rows.Count; i++)
        {
          Json.Append("{");
          for (int j = 0; j < dt.Columns.Count; j++)
          {
            Type type = dt.Rows[i][j].GetType();
            Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + StringFormat(dt.Rows[i][j].ToString(), type));
            if (j < dt.Columns.Count - 1)
            {
              Json.Append(",");
            }
          }
          Json.Append("}");
          if (i < dt.Rows.Count - 1)
          {
            Json.Append(",");
          }
        }
      }
      Json.Append("],");
      Json.Append("\"count\":" + count + "}");
      return Json.ToString();
    }

    /// <summary>
    /// 格式化字符型、日期型、布尔型
    /// </summary>
    /// <param name="str"></param>
    /// <param name="type"></param>
    /// <returns></returns>
    private static string StringFormat(string str, Type type)
    {
      if (type == typeof(string))
      {
        str = String2Json(str);
        str = "\"" + str + "\"";
      }
      else if (type == typeof(DateTime))
      {
        str = "\"" + str + "\"";
      }
      else if (type == typeof(bool))
      {
        str = str.ToLower();
      }
      else if (type != typeof(string) && string.IsNullOrEmpty(str))
      {
        str = "\"" + str + "\"";
      }
      return str;
    }

    /// <summary>
    /// 过滤特殊字符
    /// </summary>
    /// <param name="s">字符串</param>
    /// <returns>json字符串</returns>
    private static string String2Json(String s)
    {
      StringBuilder sb = new StringBuilder();
      for (int i = 0; i < s.Length; i++)
      {
        char c = s.ToCharArray()[i];
        switch (c)
        {
          case '\"':
            sb.Append("\\\""); break;
          case '\\':
            sb.Append("\\\\"); break;
          case '/':
            sb.Append("\\/"); break;
          case '\b':
            sb.Append("\\b"); break;
          case '\f':
            sb.Append("\\f"); break;
          case '\n':
            sb.Append("\\n"); break;
          case '\r':
            sb.Append("\\r"); break;
          case '\t':
            sb.Append("\\t"); break;
          default:
            sb.Append(c); break;
        }
      }
      return sb.ToString();
    }
  }
} 

最后就是html代码了 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="../Content/jquery/jquery-1.11.1.min.js"></script>
  <title></title>
</head>
<body>
  <table id="datatable"></table>
  <div id="pageination" style="width: 100%">
    <a href="javascript:void(0);" onclick="GoFirst()">首页</a>&nbsp;<a href="javascript:void(0);" onclick="GoPre()">上一页</a>&nbsp;&nbsp;<span>当前<input id="pageindex" type="text" style="width:20px" value="1" disabled="disabled" />页,总共<input id="totalcount" type="text" style="width:20px" value="" disabled="disabled" />条数据,共<input id="pagecount" type="text" style="width:20px" value="" disabled="disabled" />页</span>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="GoNext()">下一页</a>&nbsp;<a href="javascript:void(0);" onclick="GoLast()">尾页</a>
  </div>
</body>
</html>
<script>
  var pageindex = 1;
  var pagesize = 15;
  $(function () {
    search();
  });
  function search() {
    $.ajax({
      url: "../WebHandler.ashx",
      type: "post",
      data: {
        "pagesize": pagesize,
        "pageindex": pageindex
      },
      success: function (daa) {
        var json = JSON.parse(daa);
        var tab = $("#datatable");
        tab.empty();
        for (var i = 0; i < json.data.length ; i++) {
          tab.append("<tr><td>" +
            json.data[i].F_Account +
            "</td><td>" +
            json.data[i].F_RealName +
            "</td></tr>");

        }
        var count = json.count;
        var pagecount = Math.ceil(count / pagesize);
        $("#totalcount").val(count);
        $("#pagecount").val(pagecount);
      }
    });
  };
  function GoFirst() {
    pageindex = 1;
    $("#pageindex").val(pageindex);
    search();
  };
  function GoLast() {
    var pageindex = $("#pagecount").val();
    $("#pageindex").val(pageindex);
    search();
  };
  function GoPre() {
    if (pageindex > 1) {
      pageindex = pageindex - 1;
      $("#pageindex").val(pageindex);
      search();
    } else {
      alert("这是第一页!");
    }
  };
  function GoNext() {
    var pagecount = $("#pagecount").val();
    if (pageindex < pagecount) {
      pageindex = pageindex + 1;
      $("#pageindex").val(pageindex);
      search();
    } else {
      alert("这是最后一页!");
    }
  };
</script> 

看完那篇帖子自己又对照的看了一下公司做的分页,总结了一下,以前都没认真想过关于分页的东西,觉得还挺难的,但经过一次总结发现其实只要你按顺序一点一点理清楚,有一个清晰的思路,完全不难的。 

首先取数据,分两个部分,一个是把所有的数据个数统计出来另一个是取当前页码的数据,这个是很简单的,自己把有关的sql语句写好就行,sql语句的写法有很多,我取当前页码用的语句是 

select F_Account,F_RealName from (select *,Row_Number() over(order by F_Account) r from Sys_User)as w where r> (pageIndex - 1) * pagesize and r<=pageIndex* pagesize
数据取出来之后就是把页面栏拼好,并且把相关的方法写好,比如说首页,前一页,下一页,尾页等,之后把数据总数传过来,计算页数就OK了。 

<div id="pageination" style="width: 100%">
    <a href="javascript:void(0);" onclick="GoFirst()">首页</a>&nbsp;<a href="javascript:void(0);" onclick="GoPre()">上一页</a>&nbsp;&nbsp;<span>当前<input id="pageindex" type="text" style="width:20px" value="1" disabled="disabled" />页,总共<input id="totalcount" type="text" style="width:20px" value="" disabled="disabled" />条数据,共<input id="pagecount" type="text" style="width:20px" value="" disabled="disabled" />页</span>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="GoNext()">下一页</a>&nbsp;<a href="javascript:void(0);" onclick="GoLast()">尾页</a>
  </div>


function GoFirst() {
    pageindex = 1;
    $("#pageindex").val(pageindex);
    search();
  };
  function GoLast() {
    var pageindex = $("#pagecount").val();
    $("#pageindex").val(pageindex);
    search();
  };
  function GoPre() {
    if (pageindex > 1) {
      pageindex = pageindex - 1;
      $("#pageindex").val(pageindex);
      search();
    } else {
      alert("这是第一页!");
    }
  };
  function GoNext() {
    var pagecount = $("#pagecount").val();
    if (pageindex < pagecount) {
      pageindex = pageindex + 1;
      $("#pageindex").val(pageindex);
      search();
    } else {
      alert("这是最后一页!");
    }
  };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍.NET实现Repeater控件+AspNetPager控件分页,包括了.NET实现Repeater控件+AspNetPager控件分页的使用技巧和注意事项,需要的朋友参考一下 当然首先你要把bin文件放进你的项目,并加到你的工具栏去 后台绑定的代码 分页,只需要把绑定放在AspNetPager1_PageChanged 事件里 再给大家一个实例 前台页面代码 后台代码

  • 本文向大家介绍自己动手写的jquery分页控件(非常简单实用),包括了自己动手写的jquery分页控件(非常简单实用)的使用技巧和注意事项,需要的朋友参考一下 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知

  • 问题内容: 我正在使用下面的循环+ jQuery在下一组页面中加载,并且在第一次单击时有效,但是当加载下一页并单击“较新的帖子”时,它将重新加载整个页面。有任何想法吗? 问题答案: 您正在使用jQuery的方法插入内容,这是的快捷方式,当然可以动态地插入内容。 动态内容需要将事件委派给非动态父对象,而jQuery可以轻松实现

  • 本文向大家介绍简单实现jsp分页,包括了简单实现jsp分页的使用技巧和注意事项,需要的朋友参考一下 数据分页,在开发中必不可少,由于数据量太大,不得不进行处理。但是对于分页,又有很多种方式,比如使用sql语句的limit,或者使用jquery的插件。但是底层的逻辑,都是需要的。 在这里贴出bean对象的代码,以及一个辅助类。我做的这个项目是一个个人博客,算是个人网站吧。 (只贴部分底层逻辑代码)

  • 本文向大家介绍Java简单实现SpringMVC+MyBatis分页插件,包括了Java简单实现SpringMVC+MyBatis分页插件的使用技巧和注意事项,需要的朋友参考一下 1.封装分页Page类 2.封装分页插件 3.MyBatis配置文件:mybatis-config.xml 4.分页拦截器 5.Spring配置 6.SpringMVC配置拦截器

  • 本文向大家介绍.NET中的repeater简介及分页效果,包括了.NET中的repeater简介及分页效果的使用技巧和注意事项,需要的朋友参考一下 Repeater控件是一个数据绑定容器控件,它能够生成各个项的列表,并可以使用模板定义网页上各个项的布局。当该页运行时,该控件为数据源中的每个项重复此布局。 配合模板使用repeater控件 若要使用repeater控件,需创建定义控件内容布局的模板。