C#实现分页组件的方法
分页无论是前端和后端，基本都有广泛应用！下面通过一个小小案例完成这个分页效果：
参数含义：
string urlFormat: 要传给服务器端的URL地址格式，方便在点超链接时进行相应的跳转
long totalSize: 总的数据条数。
long pageSize: 每页多少条数据
long currentPage: 当前的页数
后面通过具体的一个案例来用这个分页方法：
一.分页方法：
/// <summary>
/// 生成页码的html
/// </summary>
/// <param name="urlFormat">超链接的格式。list.ashx?pagenum={pageNum}。地址中用{pagenum}做为当前页码的占位符</param></param>
/// <param name="totalSize">总数据条数</param>
/// <param name="pageSize">每页多少条数据</param>
/// <param name="currentPage">当前页</param>
/// <returns></returns>
public static RawString Pager(string urlFormat, long totalSize,
long pageSize, long currentPage)
{
StringBuilder sb = new StringBuilder();
//总页数
long totalPageCount = (long)Math.Ceiling((totalSize * 1.0f) / (pageSize * 1.0f));
//当前页的前几页
long firstPage = Math.Max(currentPage - 5, 1);
//当前页的后几页
long lastPage = Math.Min(currentPage + 6, totalPageCount);
//绘制分页,首页
sb.AppendLine("<div><a href='" + urlFormat.Replace("{pageNum}", "1") + "'>首页</a>");
//绘制分页中间数据部分
for (long i = firstPage; i < lastPage; i++)
{
string url = urlFormat.Replace("{pageNum}", i.ToString());
if (i == currentPage) //点击后就不显示超链接
{
sb.AppendLine("<a>" + i + "</a>");
}
else
{
sb.AppendLine("<a href='" + url + "'>" + i + "</a>");
}
}
//显示最后一页
sb.AppendLine("<a href='" + urlFormat.Replace("{pageNum}", totalPageCount.ToString()) + "'>末页</a></div>");
return new RawString(sb.ToString());
}
二.案例调用：
服务器端（test.ashx）：这里为了方便看到效果，展示数据直接用的固定数据
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
long pn = Convert.ToInt64(context.Request["pn"]);
if (pn == 0) //Convert.ToInt64(null)返回的是0
{
pn = 1;
}
long[] num = new long[50]; //这里的数据用的是固定数据
for (int i = 0; i < 50; i++)
{
num[i] = ((pn-1) * 50) + i;
}
OutputRazor(context, "~/test.cshtml", new { nums=num,page=pn}); //这里用的Razor模板引擎
}
这里的Razor方法见：Razor模板引擎简单介绍
UI端展示（test.cshtml）：
<body>
<ul>
@{
foreach (int i in Model.nums)
{
<li>@i</li>
}
}
</ul>
@Pager("test.ashx?pn={pageNum}", 1020, 50, Model.page);
</body>
效果图：
三.jQuery分页插件：
前面写的这些主要是进行功能的实现，样式效果差了点。下面贴上通过jQuery实现的分页效果
jQuery的效果图，及调用方法：
完整代码：
<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>一个非常简单的jQuery分页插件</title>
<style>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div class="tcdPageCode">
</div>
<pre>
调用方法：
$(".tcdPageCode").createPage({
pageCount:20,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});
pageCount：总页数
current：当前页
</pre>
</body>
<script src="/ajaxjs/jquery.min.js"></script>
<script src="/ajaxjs/jquery.page.js"></script>
<script>
$(".tcdPageCode").createPage({
pageCount:20,
current:5,
backFn:function(p){
console.log(p);
}
});
</script>
<!-- 代码部分end -->
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
c#分页显示服务器上指定目录下的所有图片示例
c#分页显示服务器上指定目录下的所有图片 复制代码 代码如下: <%@ Page Language="C#" EnableViewState="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
C#构建分页应用的方法分析
本文实例讲述了C#构建分页应用的方法.分享给大家供大家参考,具体如下: 1.SQL语句 WITH [temptableforStockIC] AS ( SELECT *,ROW_NUMBER() OVER (ORDER BY CreateTime DESC) AS RowNumber FROM [StockIC] WHERE 1=1 AND Model = 'FTY765OP' ) SELECT * FROM [temptableforStockIC] WHERE RowNumber BETWE
-
C# DataTable分页处理实例代码
有时候我们从数据库获取的数据量太大,而我们不需要一次性显示那么多的时候,我们就要对数据进行分页处理了,让每页显示不同的数据. public DataTable GetPagedTable(DataTable dt, int PageIndex, int PageSize)//PageIndex表示第几页,PageSize表示每页的记录数 { if (PageIndex == 0) return dt;//0页代表每页数据,直接返回 DataTable newdt = dt.Copy(); new
-
c#分页读取GB文本文件实例
本文实例讲述了c#分页读取GB文本文件的方法.分享给大家供大家参考.具体如下: 一.应用场景: ① .我在做BI开发测试的时候,有可能面对source文件数GB的情况,如果使用一般的文本编辑器,则会卡死,或要等很久才能显示出来. ② .有时候,我们使用ascii(01)或ascii(02)作为行或列的分隔符,这样的临时文件用于导数据到DB,如果文件导入过程中有错误,需要查看文件 的时候,普通的编辑器不支持换行,则会很恐怖. 为解决这两个需求,我使用c#完成了一个简单的winform的应用程序.
-
基于jquery的分页控件(C#)
JS代码: Code: 复制代码 代码如下: var _MaxPageSize = 0; var _PageSize = 5; var _IsUpDown = false; function InitPage(funName, currentPageSize, maxPageSize, pageSize, isUpDown) { _FunName = funName; _CurrentPageSize = currentPageSize; _MaxPageSize = maxPageSize;
-
C#基于数据库存储过程的AJAX分页实例
本文实例讲述了C#基于数据库存储过程的AJAX分页实现方法.分享给大家供大家参考.具体如下: 首先我们在数据库(SQL Server)中声明定义存储过程 复制代码 代码如下: use sales --指定数据库 if(exists(select * from sys.objects where name='proc_location_Paging')) --如果这个proc_location_paging存储过程存在则删除 drop proc proc_location_Pagin
-
C#拼接SQL语句 用ROW_NUMBER实现的高效分页排序
如果项目中要用到数据库,铁定要用到分页排序.之前在做数据库查询优化的时候,通宵写了以下代码,来拼接分页排序的SQL语句 复制代码 代码如下: /// <summary> /// 单表(视图)获取分页SQL语句 /// </summary> /// <param name="tableName">表名或视图名</param> /// <param name="key">唯一键</param> //
-
C#中常用的分页存储过程小结
表中主键必须为标识列,[ID] int IDENTITY (1,1)//每次自增一 1.分页方案一:(利用Not In和SELECT TOP分页) 语句形式: 复制代码 代码如下: SELECT TOP 10 * FROM TestTable WHERE (ID NOT IN (SELECT TOP 20 id FROM TestTable ORDER BY id)) ORDER BY ID SELECT TOP 页大小 * FROM TestTable WHERE (ID NOT IN (SE
-
适用于WebForm Mvc的Pager分页组件C#实现
本文为大家分享了自己写的一个Pager分页组件,WebForm,Mvc都适用,具体内容如下 分页控件其实就是根据链接在页面间传递参数,因为我看到MVC中你可以看到这样传递参数的new {para=val}这种方式传递参数,于是我想到用可以模仿这种传递参数的方式,那就用dynamic来作为参数对象传递. 下面是附上我写的具体的实现的代码 数据处理代码: 1.定义IPagedList接口 using System; using System.Collections.Generic; using Sy
-
基于vue2的table分页组件实现方法
本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下 pagination.js: (function(){ var template = '<div class="page-bar" > \ <div class="info">{{info}}</div>\ <div class="showpages">每页<select class="showpa
-
JavaScript分页组件使用方法详解
分页组件是web开发中常见的组件,请完成pagination函数,在id为jsPagination的DOM元素中完成分页的显示部分,需求如下 1.最多连续显示5页,居中高亮显示current页(如demo1所示) 2.total为0时,隐藏整个元素(如demo2所示) 3.如果total<=5,则显示全部页数,隐藏"首页"和"末页"元素(如demo3所示) 4.当current居中不足5页,向后(前)补足5页,隐藏"首页"("末页
-
vue3.0手动封装分页组件的方法
本文实例为大家分享了vue3.0手动封装分页组件的具体代码,供大家参考,具体内容如下 1.父组件引入 src/views/goods/components/goods-comment.vue <!-- page表示初始化分页时,默认显示第几页 --> <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' /> //调接口 import {fin
-
C#实现分页组件的方法
分页无论是前端和后端,基本都有广泛应用!下面通过一个小小案例完成这个分页效果: 参数含义: string urlFormat: 要传给服务器端的URL地址格式,方便在点超链接时进行相应的跳转 long totalSize: 总的数据条数. long pageSize: 每页多少条数据 long currentPage: 当前的页数 后面通过具体的一个案例来用这个分页方法: 一.分页方法: /// <summary> /// 生成页码的html /// </summary&g
-
js多功能分页组件layPage使用方法详解
本文的主要目的就是为大家分享layPage 多功能的js分页组件具体操作方法,供大家参考,具体内容如下 php 部分 function index(){ header('Content-Type:text/html;charset=utf-8'); // 获取当前页码,默认第一页,设置每页默认显示条数 $nowpage = I('get.page', 1, 'intval'); $limits = 8; // 获取总条数 $count = M('Article') -> where(array(
-
YII2框架中分页组件的使用方法示例
本文实例讲述了YII2框架中分页组件的使用方法.分享给大家供大家参考,具体如下: 当数据过多,无法一页显示时,我们经常会用到分页组件,YII2中已经帮我们封装好了分页组件. 首先我们创建操作数据表的AR模型: <?php namespace app\models; use yii\db\ActiveRecord; class MyUser extends ActiveRecord { public static function tableName() { return '{{%user}}';
-
Vue中ElementUI分页组件Pagination的使用方法
Vue中ElementUI分页组件Pagination的使用,供大家参考,具体内容如下 一.概要 ElementUI 提供了 el-pagination 组件,只要配置相应得参数和事件,即可实现分页. 二.实现 1.基本用法 <div class="pagination"> <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page
-
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件. 首先使用基础 Vue 构造器,创建一个"子类",Vue.extend( options ) var barHtml = '<div class="page-bar">'+ '<ul>'+ '<li v-if="cur>1"><a v-on:click=&
-
基于Vue.js的表格分页组件
一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
-
vue分页组件table-pagebar使用实例解析
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or