前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="JqPaginator.Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JPagination分页插件demo</title>
<link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="CSS/style.css" rel="stylesheet" />/*这是插件的的样式*/
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>/*引用jquery脚本*/
<script src="Scripts/jquery.paginate.js" type="text/javascript"></script>/*引用插件*/
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<h1>
JPagination分页插件demo</h1>
<table id="TB" class="table table-bordered table-striped table-hover">
<tr id="TR">
<th>
行号
</th>
<th>
SOP名字
</th>
<th>
操作人
</th>
<th>
操作时间
</th>
</tr>
</table>
<div id="paginator">
</div>
<input type="hidden" name="name" value="" id="input_getCount" />
<script type="text/javascript">
$(function () {
getData(1); //初次运行,需要把第一页的数据放到页面显示,第一次加载完脚本之后,不会自动执行插件的onChange方法,所以需要认为的加载一次数据
$("#paginator").paginate({
count: getCount(),//getCount方法可以获取到数据的总页数
start: 1,
display: 7,
border: true,
border_color: '#fff',
text_color: '#fff',
background_color: 'black',
border_hover_color: '#ccc',
text_hover_color: '#000',
background_hover_color: '#fff',
images: false,
mouse: 'press',
onChange: function (page) {
getData(page);
}
}); });
function getCount() {
var count = "";
$.ajax({
async: false,
type: "post",
url: "Handler1.ashx?action=getCount",
data: {},
success: function (result) {
count = result;
}
});
return count;
}
function getData(page_index) {
var new_content = "";
$.ajax({
type: "post",
url: "Handler1.ashx?action=getData",
data: { page: page_index },
success: function (result) {
var content = eval(result);
for (var i = 0; i < content.length; i++) {
if (new_content.length == 0) {
new_content = "<tr><td>" + content[i]["NUM"] + "</td><td>" + content[i]["SOP"] + "</td><td>" + content[i]["NAME"] + "</td><td>" + content[i]["DATE"] + "</td></tr>";
} else {
new_content = new_content + "<tr><td>" + content[i]["NUM"] + "</td><td>" + content[i]["SOP"] + "</td><td>" + content[i]["NAME"] + "</td><td>" + content[i]["DATE"] + "</td></tr>";
}
}
$("#TR").empty().append(new_content); //装载对应分页的内容
}
});
}
</script>
</body>
</html>

在 jquery.paginate.js 这个文件中有一些默认的设定,比如说,每页显示的数量、页码的数量、首页、尾页按钮显示的文字……都可以在里面进行默认设置的更改

通过一般处理程序,请求后台数据,getCount会返回数据的总页数,getData会返回详细的数据(以JSON字符串的形式返回)

下面一段是后台代码,可以忽略不看。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text; namespace JqPaginator
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
private static readonly string connStr = "Data Source=VICHIN-PC;Initial Catalog=MyTest;Integrated Security=True";
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string StrAction = context.Request.QueryString["action"];
switch (StrAction)
{
case "getCount":
getCount(context);
break;
case "getData":
getData(context);
break;
}
context.Response.End();
}
private void getData(HttpContext context)
{
string page_Str = context.Request["page"];
int page = Convert.ToInt32(page_Str);
int firstNum = page * - ;
int secondNum = page * ;
string getData_Str = @"select A.NUM,A.SOP,A.NAME,A.[DATE] from (select ROW_NUMBER() OVER(order by NO asc) as NUM,SOP,NAME,[DATE] from dbo.SMTSOP_DELETE_RECORD) as A where A.NUM between " + firstNum + " and " + secondNum + "";
DataTable getData_DT = Query(getData_Str);
if (getData_DT.Rows.Count > )
{
context.Response.Write(DataTable2Json(getData_DT));
}
}
private void getCount(HttpContext context)
{
string getCount_Str = "select COUNT(NO) as NumCount from dbo.SMTSOP_DELETE_RECORD";
DataTable Count_DT = Query(getCount_Str);
if (Count_DT.Rows.Count > )
{
int count = Convert.ToInt32(Count_DT.Rows[][].ToString());
int j = count % ;
int k = count / ;
if (j != )
context.Response.Write((k + ).ToString());
else
{
context.Response.Write(k.ToString());
}
}
}
public static string DataTable2Json(DataTable dt)
{
StringBuilder SB = new StringBuilder();
SB.Append("[");
for (int i = ; i < dt.Rows.Count; i++)
{
SB.Append("{");
for (int j = ; j < dt.Columns.Count; j++)
{
SB.Append("\"");
SB.Append(dt.Columns[j].ColumnName);
SB.Append("\":\"");
SB.Append(dt.Rows[i][j].ToString());
SB.Append("\",");
}
SB.Remove(SB.Length - , );
SB.Append("},");
}
if (dt.Rows.Count > )
{
SB.Remove(SB.Length - , );
}
SB.Append("]");
return SB.ToString();
} public bool IsReusable
{
get
{
return false;
}
}
public static DataTable Query(string sqlStr) //创建一个表集合,名字为GetData
{
SqlConnection conn = new SqlConnection(connStr);
conn.Open();
try
{
SqlCommand comm = new SqlCommand(sqlStr, conn);
SqlDataAdapter da = new SqlDataAdapter(comm);
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
catch (Exception ex)
{
throw ex;
}
finally
{
conn.Close();
}
}
}
}

这个是效果图

JPagination分页插件的使用(ASP.NET中使用)的更多相关文章

  1. PageHelper分页插件的使用

    大家好!今天写ssm项目实现分页的时候用到pageHelper分页插件,在使用过程中出现了一些错误,因此写篇随笔记录下整个过程 1.背景:在项目的开发的过程中,为了实现所有的功能. 2.目标:实现分页 ...

  2. Spring Boot系列教程八: Mybatis使用分页插件PageHelper

    一.前言 上篇博客中介绍了spring boot集成mybatis的方法,基于上篇文章这里主要介绍如何使用分页插件PageHelper.在MyBatis中提供了拦截器接口,我们可以使用PageHelp ...

  3. Spring Boot系列教程十一: Mybatis使用分页插件PageHelper

    一.前言 上篇博客中介绍了spring boot集成mybatis的方法,基于上篇文章这里主要介绍如何使用分页插件PageHelper.在MyBatis中提供了拦截器接口,我们可以使用PageHelp ...

  4. Asp.Net中的三种分页方式

    Asp.Net中的三种分页方式 通常分页有3种方法,分别是asp.net自带的数据显示空间如GridView等自带的分页,第三方分页控件如aspnetpager,存储过程分页等. 第一种:使用Grid ...

  5. Spring 中PageHelper分页插件使用

    1.增加pagehelper <!-- mybatis pager --> <dependency> <groupId>com.github.pagehelper& ...

  6. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  7. ASP.NET中无刷新分页

    上次介绍了我们代码写的刷新分页,这次就来说说无刷新分页. 这次我们是在上次的基础上改动了一些,我们都知道想要无刷新,就需要Ajax,在我们的ASP.NET中AJax是和一般处理程序配合着用的. 无刷新 ...

  8. ASP.NET中刷新分页

    1,第一次全部把数据加载到内存中,然后再做分页,性能差,不推荐. 2,GridView自带分页 3,AspNetPager分页控件  这个是第三分控件需要下载,很好用 4,自己写分页 前三种就不介绍如 ...

  9. 项目中DataTables分页插件的使用

    在项目开发的过程中,一般都会对表格进行分页处理,大多是情况下会在项目中配置好后台分页插件,提高效率,减轻浏览器的压力.但是有时会遇到有些数据不能直接通过分页插件操作数据库进行分页数据查询,那就需要用到 ...

随机推荐

  1. hadoop-mapreduce 详解

    mapreduce 完整流程解析 1. 在客户端启动一个 job: hadoop jar share/hadoop/tools/lib/hadoop-streaming-2.6.5.jar -file ...

  2. numpy-tile 数组复制

    tile(A, reps):把数组A复制成新数组 # 把 矩阵 看做一个整体,第二个参数代表把 矩阵 复制 m*n 次 b = np.arange(1, 5).reshape(2, 2) print( ...

  3. Jade学习(六)之使用html2jade反编译

    我们可以使用html2jade将html编译成jade 首先安装html2jade npm install html2jade -g 用法一:使用html2jade将html转为jade html2j ...

  4. 面试必备:GET和POST的用法和区别

    版权声明一:本文为博主原创文章,转载请附上原文出处链接和本声明.版权声明二:本网站的所有作品会及时更新,欢迎大家阅读后发表评论,以利作品的完善.版权声明三:对不遵守本声明或其他违法.恶意使用本网内容者 ...

  5. 关于python3.4版本中的zip函数

    特别注意: 在window,显示变量 print(x);而在linux中 print x 例如,有两个列表: >>>a = [1,2,3] >>>b = [4,5, ...

  6. 为什么现在UML很少用了

    新霸哥发现UML在面向对象的设计中的需求,相关行为.一些体系结构的实现提供了一套综合完整的表示法,但是由于使用的人比较少,初学者不容易快速入门,所以就导致了UML不是那么的受欢迎. UML在开发中有什 ...

  7. python_实现员工信息表

    实现员工信息表 文件存储格式如下:id,name,age,phone,job1,Alex,22,13651054608,IT2,Egon,23,13304320533,Tearcher3,nezha, ...

  8. java面试(反射)05

    1.什么是反射 JAVA反射机制是在运行状态中,对于任意一个类,都能够获取这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取类信息以及动态调用对象内容就称为jav ...

  9. HDU5840 Problem This world need more Zhu 分块 树剖

    给一颗n个点的有点权的树,有m个询问,对于每个询问u,v,k,首先将点u到点v的最短路径上的所有点按顺序编号,u的编号为1,求树链上所有点的新编号cnt满足cnt%k==0的点的权值的最大值.n,m, ...

  10. nasm

    sudo apt install nasm 64bit: nasm -f elf64 test.asm ld -s -o test test.o --------------------------- ...