asp.net 使用js分页实现异步加载数据

2024-07-10 12:43:27

字体：大中小

来源：转载

供稿：网友

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 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") {

上一篇：ASP.NET取得所有颜色值示例

下一篇：gridview 行选添加颜色和事件

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注