JPagination分页插件的使用(ASP.NET中使用)
前台代码
<%@ 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中使用)的更多相关文章
- PageHelper分页插件的使用
大家好!今天写ssm项目实现分页的时候用到pageHelper分页插件,在使用过程中出现了一些错误,因此写篇随笔记录下整个过程 1.背景:在项目的开发的过程中,为了实现所有的功能. 2.目标:实现分页 ...
- Spring Boot系列教程八: Mybatis使用分页插件PageHelper
一.前言 上篇博客中介绍了spring boot集成mybatis的方法,基于上篇文章这里主要介绍如何使用分页插件PageHelper.在MyBatis中提供了拦截器接口,我们可以使用PageHelp ...
- Spring Boot系列教程十一: Mybatis使用分页插件PageHelper
一.前言 上篇博客中介绍了spring boot集成mybatis的方法,基于上篇文章这里主要介绍如何使用分页插件PageHelper.在MyBatis中提供了拦截器接口,我们可以使用PageHelp ...
- Asp.Net中的三种分页方式
Asp.Net中的三种分页方式 通常分页有3种方法,分别是asp.net自带的数据显示空间如GridView等自带的分页,第三方分页控件如aspnetpager,存储过程分页等. 第一种:使用Grid ...
- Spring 中PageHelper分页插件使用
1.增加pagehelper <!-- mybatis pager --> <dependency> <groupId>com.github.pagehelper& ...
- 在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
- ASP.NET中无刷新分页
上次介绍了我们代码写的刷新分页,这次就来说说无刷新分页. 这次我们是在上次的基础上改动了一些,我们都知道想要无刷新,就需要Ajax,在我们的ASP.NET中AJax是和一般处理程序配合着用的. 无刷新 ...
- ASP.NET中刷新分页
1,第一次全部把数据加载到内存中,然后再做分页,性能差,不推荐. 2,GridView自带分页 3,AspNetPager分页控件 这个是第三分控件需要下载,很好用 4,自己写分页 前三种就不介绍如 ...
- 项目中DataTables分页插件的使用
在项目开发的过程中,一般都会对表格进行分页处理,大多是情况下会在项目中配置好后台分页插件,提高效率,减轻浏览器的压力.但是有时会遇到有些数据不能直接通过分页插件操作数据库进行分页数据查询,那就需要用到 ...
随机推荐
- sql server 获取整数的函数ceiling(x)和floor(x)
--ceiling(x)返回不小于x的最小整数值,floor(x)返回不大于x的最大整数值 示例:select CEILING(-3.35), CEILING(3.35), FLOOR(-3.35), ...
- oracle中的多表查询和子查询以及一些注意事项
多表查询就是使用两张表及其以上的查询.首先需要知道几个名词,笛卡尔积,内连接,外连接,子查询. 1)笛卡尔积 所谓笛卡尔积其实就是两张表数据的条数相乘得到的最后结果,例如表1有10条数据,表2有4条数 ...
- 已知两个int变量a、b,定义4个方法分别对变量a、b进行加减乘除运算,并测试结果。
package com.fs.test; public class Test { public void aMethod(int a, int b) { int add = a + b;//*表示加法 ...
- sql:union 与union的使用和区别
SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...
- css阴影——box-shadow
1.语法 box-shadow: h-shadow v-shadow blur spread color inset; box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影 ...
- h5与app混合开发,jsbridge
https://juejin.im/post/5bda6f276fb9a0226d18931f https://juejin.im/post/5abca877f265da238155b6bc http ...
- openapi
https://www.breakyizhan.com/swagger/2810.html https://www.cnblogs.com/serious1529/p/9318115.html htt ...
- 自用|DDoS防御产品集合
这是笔者对国内外的DDoS云防御产品做的一个集合,之前存在自己的文档里很久了,现在修改后发出来大家可以一起看看,有需要的也方便比较按需选择.有免费版的我会放在前面,遇到微量攻击时可以应急,并且也可以感 ...
- Ubuntu分区方案(菜鸟方案、常用方案和进阶方案)
菜鸟方案 “/”与swap两个分区就可以应付绝大多数的应用 常用方案 分为3个区 1. 挂载点/:主分区:安装系统和软件:大小为30G:分区格式为ext4: 2. 挂载点/home:逻辑分区:相当于“ ...
- yum 问题
[root@localhost ~]# yum update There are no enabled repos. Run "yum repolist all" to see t ...