asp.net 使用js分页,异步加载数据
2014-04-04 11:06
766 查看
1、准备工作
引入“jquery-1.8.3.min.js”,AjaxPro.2.dll”:用于前台js调用后台方法。
2、Web.config的配置
3、目录结构
下面就直接上代码了。
4、Login.aspx页面代码
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using AspNet.service;
namespace AspNet
{
public partial class Login : System.Web.UI.Page
{
//测试用 没页2条数据
public int pageSize = 2;
public int pageCount;
public LoginLogService logService = new LoginLogService();
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Login));
if (!IsPostBack)
{
pageCount = logService.PageCount(pageSize);
}
}
//AjaxPro具体使用方法可以网上例子很多
[AjaxPro.AjaxMethod]
public DataTable FindDate(int currentPage)
{
return logService.FindDate(pageSize, currentPage);
}
}
}
5、LoginLogService.cs
6、Utils放着DBHelper.cs
引入“jquery-1.8.3.min.js”,AjaxPro.2.dll”:用于前台js调用后台方法。
2、Web.config的配置
<?xml version="1.0" encoding="utf-8"?> <configuration> <connectionStrings> <clear/> <!-- 数据库链接 --> <add name="connSwtLoginLog" connectionString="Server=DUWEI\SQL2005;Database=SwtLoginLog;user id=sa;password=111111;Connect Timeout=120;pooling=true;min pool size=5;max pool size=10"/> </connectionStrings> <system.web> <compilation debug="true" targetFramework="4.0" /> <!-- 页面调用后台方法 --> <httpHandlers> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> </httpHandlers> </system.web> </configuration>
3、目录结构
下面就直接上代码了。
4、Login.aspx页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AspNet.Login" %> <!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 runat="server"> <title></title> <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> function initTable(dt) { var str = '<table border="1px">' + '<tr>' + '<td>' + 'LoginID' + '</td>' + '<td>' + 'SwtID' + '</td>' + '<td>' + 'UserName' + '</td>' + '<td>' + 'IP' + '</td>' + '<td>' + 'Address' + '</td>' + '<td>' + 'LogTime' + '</td>' + '<td>' + 'LogType' + '</td>' + '</tr>'; for (var i = 0; i < dt.Rows.length; i++) { str = str + '<tr>' + '<td>' + dt.Rows[i]['LoginID'] + '</td>' + '<td>' + dt.Rows[i]['SwtID'] + '</td>' + '<td>' + dt.Rows[i]['UserName'] + '</td>' + '<td>' + dt.Rows[i]['IP'] + '</td>' + '<td>' + dt.Rows[i]['Address'] + dt.Rows[i]['Address2'] + '</td>' + '<td>' + dt.Rows[i]['LogTime'] + '</td>' + '<td>' + dt.Rows[i]['LogType'] + '</td>' + '</tr>' } str = str + '</table>'; $("#d1").html(str); } function firtPage(page) { $("#pageNo").text(page); var dt = AspNet.Login.FindDate(page).value; initTable(dt); } //定义一个当前页初始为1 var pageNo = 1; //总页数 var totalPage = <%=pageCount %>; function showContent(op) { if (op == "first") { pageNo = 1; } else if (op == "previous") { if (pageNo > 1) pageNo -= 1; else pageNo = 1; } else if (op == "next") { if (pageNo < totalPage - 1) pageNo += 1; else pageNo = totalPage - 1; } else if (op == "last") { pageNo = totalPage - 1; } else if(op=="jump"){ var jump = $("#jump").val(); if(jump<1 || jump>totalPage){ pageNo = 1; }else{ pageNo = jump; } } else { pageNo = 1; } firtPage(pageNo); } $(function () { showContent("first"); }); </script> </head> <body> <form id="form1" runat="server"> <div id="d1" align="center"></div> <div align="center"> <span id="sp_ShowContent"> 第<label id="pageNo"></label>页|共<%=pageCount%>页 |<a onclick="showContent('first');" href="javascript:void(0);">首页</a> |<a onclick="showContent('previous');" href="javascript:void(0);">上一页</a> |<a onclick="showContent('next');" href="javascript:void(0);">下一页</a> |<a onclick="showContent('last');" href="javascript:void(0);">尾页</a> |跳到<input id="jump"/><a onclick="showContent('jump');" href="javascript:void(0);">GO</a> </span> </div> </form> </body> </html>后台代码using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using AspNet.service;
namespace AspNet
{
public partial class Login : System.Web.UI.Page
{
//测试用 没页2条数据
public int pageSize = 2;
public int pageCount;
public LoginLogService logService = new LoginLogService();
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Login));
if (!IsPostBack)
{
pageCount = logService.PageCount(pageSize);
}
}
//AjaxPro具体使用方法可以网上例子很多
[AjaxPro.AjaxMethod]
public DataTable FindDate(int currentPage)
{
return logService.FindDate(pageSize, currentPage);
}
}
}
5、LoginLogService.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; namespace AspNet.service { public class LoginLogService { public DataTable FindDate(int pageSize, int currentPage) { string sql = "SELECT LoginID,SwtID,UserName,IP,Address,Address2,LogTime,LogType FROM ( " + "SELECT * ,ROW_NUMBER() OVER(ORDER BY LoginID) AS columnNum FROM dbo.LoginLog ) a " + "WHERE a.columnNum BETWEEN @begin AND @end"; SqlParameter[] paras = new SqlParameter[]{new SqlParameter("@begin",pageSize * (currentPage-1)+1), new SqlParameter("@end",pageSize * currentPage)}; DataTable dt = DBHelper.GetDataSet(sql, paras); return DBHelper.GetDataSe 4000 t(sql, paras); } public int PageCount(int pageSize) { string sql = "SELECT COUNT(1) FROM dbo.LoginLog"; int rowCount = int.Parse(DBHelper.GetDataSet(sql).Rows[0][0].ToString()); return rowCount % pageSize == 0 ? rowCount / pageSize : rowCount / pageSize+1; } } }
6、Utils放着DBHelper.cs
using System; using System.Collections.Generic; using System.Text; using System.Data; using System.Data.SqlClient; using System.Configuration; namespace AspNet { public static class DBHelper { private static SqlConnection connection; public static SqlConnection Connection { get { string connectionString = ConfigurationManager.ConnectionStrings["connSwtLoginLog"].ConnectionString; if (connection == null) { connection = new SqlConnection(connectionString); connection.Open(); } else if (connection.State == System.Data.ConnectionState.Closed) { connection.Open(); } else if (connection.State == System.Data.ConnectionState.Broken) { connection.Close(); connection.Open(); } return connection; } } //ExecuteNonQuery方法是用来执行insert、delete、update语句的,返回的是影响的行数 public static int ExecuteCommand(string safeSql) { SqlCommand cmd = new SqlCommand(safeSql, Connection); int result = cmd.ExecuteNonQuery(); return result; } public static int ExecuteCommand(string sql, params SqlParameter[] values) { SqlCommand cmd = new SqlCommand(sql, Connection); cmd.Parameters.AddRange(values); return cmd.ExecuteNonQuery(); } //ExecuteScalar()返回sql语句执行后的第一行第一列的值,object类型 public static int GetScalar(string safeSql) { SqlCommand cmd = new SqlCommand(safeSql, Connection); int result = Convert.ToInt32(cmd.ExecuteScalar()); return result; } public static int GetScalar(string sql, params SqlParameter[] values) { SqlCommand cmd = new SqlCommand(sql, Connection); cmd.Parameters.AddRange(values); int result = Convert.ToInt32(cmd.ExecuteScalar()); return result; } //ExecuteReader()返回一个Datareader对象,对象内容是为与命令匹配的所有行,通常用于读取数据 public static SqlDataReader GetReader(string safeSql) { SqlCommand cmd = new SqlCommand(safeSql, Connection); SqlDataReader reader = cmd.ExecuteReader(); return reader; } public static SqlDataReader GetReader(string sql, params SqlParameter[] values) { SqlCommand cmd = new SqlCommand(sql, Connection); cmd.Parameters.AddRange(values); SqlDataReader reader = cmd.ExecuteReader(); return reader; } public static DataTable GetDataSet(string safeSql) { connection = Connection; DataSet ds = new DataSet(); SqlCommand cmd = new SqlCommand(safeSql, Connection); SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(ds); cmd.Parameters.Clear(); return ds.Tables[0]; } public static DataTable GetDataSet(string sql, params SqlParameter[] values) { DataSet ds = new DataSet(); SqlCommand cmd = new SqlCommand(sql, Connection); cmd.Parameters.AddRange(values); SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(ds); cmd.Parameters.Clear(); return ds.Tables[0]; } } }
数据表结构:
CREATE TABLE [dbo].[LoginLog]( [LoginID] [int] IDENTITY(1,1) NOT NULL, [SwtID] [int] NULL, [UserName] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL, [IP] [nvarchar](20) COLLATE Chinese_PRC_CI_AS NULL, [Address] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL, [Address2] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL, [LogTime] [datetime] NULL, [LogType] [int] NULL CONSTRAINT [DEFAULT_LoginLog_LogType] DEFAULT ((1)), CONSTRAINT [PK_LoginLog_LoginID] PRIMARY KEY CLUSTERED ( [LoginID] ASC )WITH (PAD_INDEX = OFF, IGNORE_DUP_KEY = OFF) ON [PRIMARY] ) ON [PRIMARY]
相关文章推荐
- asp.net 使用js分页实现异步加载数据
- asp.net 使用js分页实现异步加载数据
- ASP.NET中使用WebService异步加载数据显示到页面
- asp.net 中使用EasyUI Datagrid 加载动态数据分页查询
- Asp.net使用jQuery实现数据绑定与分页
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
- 加快页面加载速度的解决方案-asp.net使用httphandler打包多CSS或JS文件
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(7):服务器端和客户端数据类型的自动转换:泛型集合类型
- 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
- Jquery zTree结合Asp.net实现异步加载数据
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet
- 关于使用asp.net 的分页显示数据。Repeater绑定数据后的分页显示。
- [参考]一个ASP.Net的DataGrid分页控件,在Oracle数据库下,每次只取当前页的数据,不使用存储过程
- asp.net updatepanel 导致JS不能加载,而无法使用
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结
- asp.net使用listview分页显示数据
- asp.net 使用JS获得串口数据
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
- ASP.NET使用后台动态加载js和css文件
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!