1、准备工作
引入“jquery-1.8.3.min.js”，AjaxPro.2.dll”：用于前台js调用后台方法。
2、Web.config的配置
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<connectionStrings>
<clear/>
<!-- 数据库链接 -->
<add 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="https://www.jb51.net/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initTable(dt) {
var str = '<table>'
+ '<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 runat="server">
<div></div>
<div>
<span>
第<label></label>页|共<%=pageCount%>页
|<a href="javascript:void(0);">首页</a>
|<a href="javascript:void(0);">上一页</a>
|<a href="javascript:void(0);">下一页</a>
|<a href="javascript:void(0);">尾页</a>
|跳到<input/><a 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
复制代码 代码如下: