jquery -----简单分页
<!DOCTYPE html>
<head>
<title>无标题页</title>
<script src="javsscript/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var page = 1;
var pagesize = 5;
var s_name;
$(function() {
//------查询
$("#search").click(function() {
page = 1;
s_name = $("#txtSearch").val();
getAjaxData(s_name, page, pagesize);
});
});
//------封装分页方法开始
function getAjaxData(strwhere, page, pagesize) {
$.ajax({
type: "get",
url: "demo7.ashx",
datatype: "json",
contentType: "application/json;charset=utf-8",
//data:{ page: page, pagesize: pagesize,name: strwhere }, 或:
data: "name=" + strwhere + "&page=" + page + "&pagesize=" + pagesize,
success: function(data) { var htmlStr = "";
htmlStr += "<table>"
htmlStr += "<thead>"
htmlStr += "<tr><td>编号</td><td>姓名</td><td>年龄</td><td>备注</td></tr>"
htmlStr += "</thead>";
htmlStr += "<tbody>"
for (var i = 0; i < data.userlist.length; i++) {
htmlStr += "<tr>";
htmlStr += "<td>" + data.userlist[i].userid + "</td>"
+ "<td>" + data.userlist[i].username + "</td>"
+ "<td>" + data.userlist[i].userage + "</td>"
+ "<td>" + data.userlist[i].userdesc + "</td>" htmlStr += "</tr>";
}
//如果查询出得结果总数小于pagesize则用空行填充
if (data.userlist.length < pagesize) {
for (var i = 0; i < pagesize - data.userlist.length; i++)
{
htmlStr += "<tr><td style='height:28px;'></td></tr>";
}
}
htmlStr += "</tbody>";
htmlStr += "<tfoot>";
htmlStr += "<tr>";
htmlStr += "<td colspan='4'>";
htmlStr += "<span>总:" + data.totalcount + "条 当前:" + page + "/<span id='count'>" + (data.totalcount % pagesize == 0 ? parseInt(data.totalcount / pagesize) : parseInt(data.totalcount / pagesize + 1)) + "</span>页" + "</span>";
htmlStr += "<a href='javascript:GoToFirstPage()'id='aFirstPage' >首 页</a>";
htmlStr += "<a href='javascript:GoToPrePage()' id='aPrePage' >上一页</a>";
htmlStr += "<a href='javascript:GoToNextPage()' id='aNextPage'>下一页</a>";
htmlStr += "<a href='javascript:GoToEndPage()' id='aEndPage' >尾 页</a>";
htmlStr += "<input type='text' /><input type='button' value='跳转' onclick='GoToAppointPage(this)' /> ";
htmlStr += "</td>";
htmlStr += "</tr>";
htmlStr += "</tfoot>";
htmlStr += "</table>";
$("#userlist").html(htmlStr); },
error: function(error) {
alert(error);
}
});
}
//--------封装分页方法结束
//首页
function GoToFirstPage() {
page = 1;
getAjaxData(s_name, page, pagesize);
}
//前一页
function GoToPrePage() { page = page-1<= 0 ? 1 : page-1;
getAjaxData(s_name, page, pagesize); }
//后一页
function GoToNextPage() {
if (page + 1 <= parseInt($("#count").text())) {
page=page+1;
}
getAjaxData(s_name, page, pagesize);
}
//尾页
function GoToEndPage() {
page = parseInt($("#count").text());
getAjaxData(s_name, page, pagesize);
}
//跳转
function GoToAppointPage(e) {
var page_goto = $(e).prev().val();
if (isNaN(page_goto)) {
alert("请输入数字!");
}
else {
var tempPageIndex = page;
page = parseInt($(e).prev().val());
if (page < 0 || page >parseInt($("#count").text())) {
page = tempPageIndex;
alert("请输入有效的页面范围!");
}
else {
getAjaxData(s_name, page_goto, pagesize);
}
}
} </script>
<!--简单样式 -->
<style type="text/css">
#userlist{border:1px solid gray; width:500px; height:215px;}
#userlist table{border-collapse: collapse; width:100%; height:auto;background:CFCFCF;}
#userlist table thead{ margin:0; padding:0; background-color:#CCCCCC;text-align:center; height:30px; line-height:30px;}
#userlist tbody tr{ height:28px; line-height:28px; text-align:center; }
#userlist tfoot tr{ height:30px; background:#CCCCCC;line-height:30px; text-align:center;}
#userlist tfoot tr td a{ text-decoration:none; margin:4px;}
#userlist tfoot tr td a:hover{ text-decoration:underline; color:Red;}
#userlist tfoot tr td input{ height:20px; width:40px; margin:4px;}
#userlist tfoot tr td input[type=text]{ background:white; border:0;}
#userlist tfoot tr td input[type=button]{ border:1px dashed; position:relative;top:0px;top:2px\0; cursor:pointer;}
</style>
</head>
<body> 用户姓名:<input type="text" name="name" id="txtSearch" /><input type="button" id="search"
value="查询" /><br />
<div id="userlist">
</div> </body>
</html> ---------------后台代码: <%@ WebHandler Language="C#" Class="demo7" %> using System;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class demo7 : IHttpHandler { public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
context.Response.ContentType = "application/json";
string username = context.Request.Params["name"].ToString();
//string username = context.Request.QueryString["name"].ToString();
int page = Convert.ToInt32(context.Request.Params["page"].ToString());
int pagesize = Convert.ToInt32(context.Request.Params["pagesize"].ToString());
//链接数据库
//string strcon ="server=WIN-B36NXMUXT0K\MSSQL;user ID=user;password=user;database=test";
//或读取webconfing
string strcon = ConfigurationManager.AppSettings["pubsConnectionString"].ToString();
SqlConnection con = new SqlConnection(strcon);
con.Open();
SqlCommand com = new SqlCommand();
com.Connection = con;
com.CommandType = CommandType.StoredProcedure;
com.CommandText = "proc_searchuser"; SqlParameter[] par = new SqlParameter[] { new SqlParameter("@username",SqlDbType.VarChar,12),
new SqlParameter("@page",SqlDbType.Int),
new SqlParameter("@pagesize",SqlDbType.Int),
new SqlParameter("@totalcount",SqlDbType.Int)
}; par[0].Value = username;
par[1].Value = page;
par[2].Value = pagesize;
par[3].Direction = ParameterDirection.Output; com.Parameters.AddRange(par);
//int res = com.ExecuteNonQuery();
SqlDataAdapter da = new SqlDataAdapter(com);
DataSet ds = new DataSet();
da.Fill(ds);
int totalcount = Convert.ToInt32(par[3].Value.ToString());
com.Dispose();
con.Close();
string json = ObjectToJSON(DataTableToList(ds.Tables[0]));
string resultjson = "{\"totalcount\":"+totalcount+",\"userlist\":"+json+"}";
context.Response.Write(resultjson);
} //datatable转换为list
public static List<Dictionary<string, object>> DataTableToList(DataTable dt)
{
List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
foreach (DataRow dr in dt.Rows)
{
Dictionary<string, object> dic = new Dictionary<string, object>();
foreach (DataColumn dc in dt.Columns)
{
dic.Add(dc.ColumnName, dr[dc.ColumnName]);
}
list.Add(dic);
}
return list;
}
//系列化json
public static string ObjectToJSON(object obj){
JavaScriptSerializer jss =new JavaScriptSerializer();
try
{
return jss.Serialize(obj);
}
catch(Exception ex)
{
throw new Exception("JSONHelper.ObjectToJSON(): "+ ex.Message);
}
} public bool IsReusable {
get {
return false;
}
} } //----------分页存储过程----------------------
create proc [dbo].[proc_searchuser]
(
@username varchar(12),
@page int=1,
@pagesize int=10,
@totalcount int output )
as
declare @totalsql nvarchar(200)
declare @sql varchar(4000) if(ISNULL(@username,'')<>'')
begin
set @totalsql='select @totalcount=COUNT(*) from userinfo where username like ''%'+@username+'%'''
end
else
begin
set @totalsql='select @totalcount=COUNT(*) from userinfo'
end
exec sp_executesql @totalsql,N'@totalcount int output',@totalcount output
-------------分页--------------
if @page<=0 set @page=1 set @sql='select * from (select ROW_NUMBER() over(order by userid)rowNO,* from userinfo where username like ''%'+@username+'%'')U
where U.rowNo BETWEEN '+str((@page-1)*@pagesize+1)+' AND ' +str(@page*@pagesize) exec (@sql)
jquery -----简单分页的更多相关文章
- jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- Jquery前端分页插件pagination使用
插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...
- JavaScript简单分页,兼容IE6,~3KB
简介 兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页. 使用 Browser <link rel="stylesheet" href="css/GB-pa ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
- JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
随机推荐
- 策略模式—Java实现(转)
1. 现实需求 客户有了新的需求,这时我们直接新增策略即可,改很少的代码.基本符合我们面向对象原则中的开闭原则(对扩展开放,对修改关系),实现了高内聚低耦合. 2. 策略模式定义 策略模式,又叫算法簇 ...
- Session只读的影响
.net中使用Session必须实现IRequiresSessionState接口,不过还有个只读的接口IReadOnlySessionState, 若是实现只读的接口,那么在该页面(如一般处理程序) ...
- 《鸟哥的Linux私房菜》学习笔记(8)——bash脚本编程之变量
一.变量命名 1.只能包含字母.数字和下划线,并且不能以数字开头, 2.不 ...
- Android 适配器 自定义
前言:最近看了几个开源项目,发现适配器这东西用的很多,一开始觉得这东西高大上,其实呢,感觉就是一个中转站,或者说是一个接口工具,将数据填充到一个视图中,几乎任何项目都会涉及到.所以今天也简单看了一下, ...
- [原]sencha touch之布局
今天记录一下关于sencha touch中的几种布局,其实很简单的,还是直接上代码,一目了然 1:box布局,其实就是vbox和hbox,说白了一个是横着摆放,一个是竖着摆放 Ext.applicat ...
- Service IntentService区别 (面试)
依然记得自己当初没有真正的工作经验的时候的日子,满北京跑,没有人要.妈的,现在就想问,还有谁!想想真解气.不提了. 曾经有个面试官问我service 和IntentService的区别.当时自己模模糊 ...
- rest_framework序列化
1.序列化 1)拿到queryset 2)将queryset 给序列化类 serializer = IdcSerializer(idc) #单个对象 serializer = IdcSerial ...
- IOS开发学习笔记043-QQ聊天界面实现
QQ聊天界面实现 效果如下: 实现过程: 1.首先实现基本界面 头像使用 UIImageView : 文字消息使用 UIButton 标签使用 UILable :水平居中 所有元素在一个cell中,在 ...
- PHP 命名空间和自动加载
PHP 命名空间 php5.3 之后引入了命名空间的特性,从本质上讲,命名空间就是一个容器,你可以将类.函数和变量放在其中,在命名空间中,你可以无条件地访问这些项,在命名空间之外,必须导入或引用命名空 ...
- nginx在基于域名访问的时候是下载的界面
刚才在做nginx实验时候出现访问域名的时候是下载页面一直下载了好多文件,使用IP访问就正常,在配置文件中找到一个sendfile的参数,把参数值改为off或者直接注释掉这个参数就可以访问了.