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

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") {
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.GetDataSet(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];
}

}
}

代码如下:

数据表结构：<pre code_snippet_id="274427" snippet_file_name="blog_20140404_6_6418355" name="code" class="plain">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]</pre>
<pre></pre>
<pre code_snippet_id="274427" snippet_file_name="blog_20140404_6_6418355" name="code" class="csharp"><pre code_snippet_id="274427" snippet_file_name="blog_20140404_6_6418355" name="code" class="sql"><pre code_snippet_id="274427" snippet_file_name="blog_20140404_6_6418355"></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>

</pre></pre>

赞 (0)

相关推荐

  • Javascript vue.js表格分页，ajax异步加载数据

    Javascript vue.js表格分页，ajax异步加载数据

    分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu

  • 页面加载完后自动执行一个方法的js代码

    1.在body中用onload: <body onload="myfunction()"> 2.在脚本中用window.onload: <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号 </scr

  • 当滚动条滚动到页面底部自动加载增加内容的js代码

    1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

  • 用js判断页面是否加载完成实现代码

    用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 代码如下: 复制代码 代码如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if(document.readyState == "complete") //当页

  • 基于JavaScript实现移动端无限加载分页

    本文实例为大家分享了js实现移动端无限加载分页的具体代码,供大家参考,具体内容如下 原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念:     1.scrollHeight 真实内容的高度     2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的高度     3.scrollTop 视窗上面隐藏掉的部分,即滚动条滚动的距离 思路: 1.使用fixed定位加载框     2.使用$(window).scroll();方法来触发是否加载     3.通过 真

  • Vue.js实现无限加载与分页功能开发

    Vue.js实现无限加载与分页功能开发

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如: >数据量过大,影响加载速度 >用户体验差,很难定位到之前自己看过的某篇文章 >

  • 页面加载完成后再执行JS的jquery写法以及区别说明

    1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add

  • vue.js 表格分页ajax 异步加载数据

    Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f

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

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

    1.准备工作 引入"jquery-1.8.3.min.js",AjaxPro.2.dll":用于前台js调用后台方法. 2.Web.config的配置 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <configuration> <connectionStrings> <clear/> <!-- 数据库链接 --> <

  • 使用DataTable插件实现异步加载数据

    table部分代码 <table class="table table-bordered table-striped" id="table-main"> <thead> <tr> <th>用户名</th> <th>渠道名</th> <th>游戏名</th> <th>结果</th> <th>耗时</th> <

  • Android开发实现ListView异步加载数据的方法详解

    Android开发实现ListView异步加载数据的方法详解

    本文实例讲述了Android开发实现ListView异步加载数据的方法.分享给大家供大家参考,具体如下: 1.主Activity public class MainActivity extends Activity { private ListView listView; private ArrayList<Person> persons; private ListAdapter adapter; private Handler handler=null; //xml文件的网络地址 final

  • 关于layui的下拉搜索框异步加载数据的解决方法

    思路分析:当我使用layui默认的下拉搜索框的时候,layui会默认渲染出一个HTML结构,所以我把渲染出来的这个结果直接给复制出来,这样css的样式就不用从头到尾写一遍了, 前端代码(我用的是jsp): <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC &quo

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • vue awesome swiper异步加载数据出现的bug问题

    本人第一次使用vue awesome. 踩到的坑确实不少.官网上面的用法写的很简单,按照上面做法基本会遇到如下这个问题 轮播第二次之后,首屏会自动跳过 网上找了很多资料,都不能解决这个问题.于是自己琢磨了很久终于灵光一闪.一个小技巧解决了这个问题. 使用方法应该很简单,去官网可以查看到方法.基本步骤如下 npm install vue-awesome-swiper --save-dev 在main.js中 import VueAwesomeSwiper from 'vue-awesome-swi

  • Ajax实现异步加载数据

    Ajax实现异步加载数据

    本文实例为大家分享了Ajax实现异步加载数据的具体代码,供大家参考,具体内容如下 项目结构如下 (需要导入一个JQuery的包,配置文件web.xml和springmvc-servlet.xml,不在写了,不知道的可以看一下我其它的博客,上边都有) 异步加载数据 首先创建一个实体类 package com.zkw.pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;

  • ECharts异步加载数据与数据集（dataset）

    ECharts异步加载数据与数据集（dataset）

    目录 异步加载数据 数据的动态更新 数据集(dataset) 数据到图形的映射 视觉通道(颜色.尺寸等)的映射 交互联动 异步加载数据 ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. json 数据: { "data_pie" : [ {"value":235, "name":"视频广告"}, {&

  • 详解Vue-Cli 异步加载数据的一些注意点

    刚开始学vue的时候没有使用脚手架,现在用脚手架写法有点不同,今天遇到的问题是使用豆瓣api异步加载数据的时候,会一直在命令行上报错,基本上错误都是xxx 未定义. 例子 <template> <div v-if="moviesData"> <!-- 正在上映的电影-北京 --> <h1>{{ moviesData.title }}</h1> </div> </template> <script&

随机推荐