GVKun编程网logo

loner_li AJax 实现数据的 无刷新分页 实例（引用web服务文件和存储过程）

23

本文将带您了解关于loner_liAJax实现数据的无刷新分页实例的新内容，同时我们还将为您解释引用web服务文件和存储过程的相关知识，另外，我们还将为您提供关于Ajax实现无刷新分页、ajax_js

本文将带您了解关于loner_li AJax 实现数据的 无刷新分页 实例的新内容，同时我们还将为您解释引用web服务文件和存储过程的相关知识，另外，我们还将为您提供关于Ajax 实现无刷新分页、ajax_json_存储过程_无刷新分页功能、ajax实现无刷新分页、ajax实现无刷新分页(php)的实用信息。

本文目录一览：

loner_li AJax 实现数据的 无刷新分页 实例（引用web服务文件和存储过程）

loner_li AJax 实现数据的 无刷新分页 实例（引用web服务文件和存储过程）

前台HTML页

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无刷新分页</title>
<style type="text/css">
table
{
border: 1px solid #444;
width: 800px;
height: 800px;
}
table td
{
border: solid 1px #444;
}
</style>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var pageindex = 1;
var pagesize = 10;
var lastpageindex = 1;
/*如果将代码封装成一个函数，那么除非显示调用(loaddata())，否则函数中的代码不会执行
根据传递的页码和每页显示的记录数量获取数据
*/
loaddate();
function loaddate() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetListAjax",
data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
success: function (result) {

var strtable = "<table>";
strtable += '<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>';
for (var i = 0; i < result.d.length; i++) {
strtable += '<tr>';
strtable += '<td>' + result.d[i].Id + '</td>';
strtable += '<td>' + result.d[i].NewsTitle + '</td>';
strtable += '<td>' + result.d[i].NewsContent + '</td>';
strtable += '<td>' + result.d[i].CreateTime.toString("yyyy-MM-dd hh:mm:ss") + '</td>';
strtable += '</tr>';
}

strtable += '</table>';
$('#mydiv').html(strtable);
}
});
}

//根据传递到后台的每页显示的记录数量来获取最大的页码(就是一共有多少页)
$.ajax({
type: "post",
url: "WebService1.asmx/GetLastPageindex",
data: "{pagesize:" + pagesize + "}",
success: function (result) {
lastpageindex = result.d;
//alert(lastpageindex);
}
});

//首页
$('a:first').click(function () {
pageindex = 1;
loaddate();
});
//上一页
$('a:eq(1)').click(function () {
if (pageindex > 1) {
pageindex--;
loaddate();

}

});
//下一页
$('a:eq(2)').click(function () {
if (pageindex < lastpageindex) {
pageindex++;
loaddate();
}

});
//最后一页
$('a:eq(3)').click(function () {
pageindex = lastpageindex;
loaddate();
});

//go
$('a:last').click(function () {
var goindex = $('#txtPageindex').val();
pageindex = goindex;
loaddate();
});

})
</script>
</head>
<body>
<div id="mydiv">
</div>
<div>
<a href="#">第一页</a><a href="#">上一页</a><a href="#">下一页</a><a href="#">最后一页</a>
<input id="txtPageindex" type="text" /><a href="#">Go</a>

</div>
</body>
</html>

WebService1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;

namespace _0521存储过程
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolBoxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
//分页获取数据列表
[WebMethod]
public List<Model.T_News1> GetListAjax(int pagesize,int pageindex)
{
BLL.T_News1 bnew = new BLL.T_News1();
DataTable dt= bnew.GetListDataTable(pagesize,pageindex);
List<Model.T_News1> list = new List<Model.T_News1>();
int Id;
string newstitle="";
string newscontent="";
string createtime;
for (int i = 0; i < dt.Rows.Count; i++)
{
Id=Convert.ToInt32(dt.Rows[i]["Id"]);
newstitle=dt.Rows[i]["NewsTitle"].ToString();
newscontent=dt.Rows[i]["NewsContent"].ToString();
createtime=Convert.ToDateTime(dt.Rows[i]["CreateTime"]).ToString("yyyy-MM-dd hh:mm:ss");

Model.T_News1 news = new Model.T_News1() {
Id = Id,
NewsTitle = newstitle,
NewsContent = newscontent,
CreateTime = Convert.ToDateTime(createtime)

};
//news.Id = Id;
//news.NewsTitle = newstitle;
//news.NewsContent = newscontent;
//news.CreateTime = createtime;
list.Add(news);

}
return list;
}

[WebMethod]
public int GetLastPageindex(int pagesize)
{
BLL.T_News1 bnews = new BLL.T_News1();
int totalcount= bnews.GetRecordCount("");
if (totalcount % pagesize == 0)
{
return totalcount / pagesize;
}
else
{
return totalcount/pagesize+1;
}

}
}
}

DataAccess层

DbHelpersql.cs


public static DataTable RunProcedureDataTable(string storedProcName,IDataParameter[] parameters)
{
using (sqlConnection connection = new sqlConnection(connectionString))
{
DataTable dt = new DataTable();
connection.open();
sqlDataAdapter sqlDA = new sqlDataAdapter();
sqlDA.SelectCommand = BuildQueryCommand(connection,storedProcName,parameters);
sqlDA.Fill(dt);
connection.Close();
return dt;
}
}

DAL层

/// <summary>
/// 分页获取数据列表
/// </summary>
public DataTable GetListDataTable(int PageSize,int PageIndex)
{
sqlParameter[] parameters = {

new sqlParameter("@PageSize",sqlDbType.Int),
new sqlParameter("@PageIndex",sqlDbType.Int)
};

parameters[0].Value = PageSize;
parameters[1].Value = PageIndex;
return DbHelpersql.RunProcedureDataTable("pro_fenye",parameters);
}

sqlserver 存储过程

CREATE PROC pro_fenye
@pagesize int,
@pageindex int
as
select * from(
select Row_number() over(order by Id) as rownumber,*from T_News1
)T
where rownumber>(@pageindex-1)*@pagesize AND rownumber<=@pageindex*@pagesize

go

exec pro_fenye 5,1

Ajax 实现无刷新分页

Ajax 实现无刷新分页

注：本文中使用到的一些类库在前面文章都能找到源代码，我会在文中指明链接所在，为了缩短文章篇幅，由此带来的阅读不便，敬请谅解。

本文讲解 Ajax 实现无刷新分页、实现原理、代码展示、代码下载。

这里需要说明一些知识：

1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态；

2、那么，Ajax 无刷新页面是运行在动态页面（.PHP）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面；

3、实现原理：通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据，并显示。

好了，下面进行代码讲解：

既然，是运行在静态页面上，我们首先先创建一个静态 HTML 页面，index.html 的代码清单如下。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script> <!-- 载入 Ajax 类库 -->
<title>Ajax 实现无刷新页面</title>
<style type="text/css">
	body {
		font-size:12px;	
	}
</style>
</head>
<body>
	<div id="fpage">数据加载中...</div>
</body>
</html>

代码清单中，我们加载了一个 Ajax 类库，这个类库可以在http://www.jb51.cc/article/p-odjmoaws-no.html 文章中找到（并附有使用方法）

在这个静态页面中，只会显示一个“数据加载中....”，并没有任何数据。这时，我们就需要一个 JS 脚本来实现通过 Ajax 从数据库中获取数据。JS 脚本如下：

<script type="text/javascript">
	/**
 	* setPage(url) 根据 url 从 article.PHP 中获取数据
	* @param int pageNum 页码
	* @return string
	*/
	var cache=new Array(); // 缓存变量，当数据被访问过之后放置在缓存中，加快访问速度
	function setPage(pageNum) {
		var fpage = document.getElementById('fpage'); // 获取 fpage 对象
		// 如果缓存中存在数据，那么直接从缓存中读取；如果不存在数据，那么就从数据库中读取，并把数据存入缓存
		if (typeof(cache[pageNum])=='undefined') {
			var ajax = Ajax();
			ajax.get('article.PHP?page='+pageNum,function(data){
				fpage.innerHTML = data; // fpage对象的内容是从 article.PHP 中取来的
				cache[pageNum] = data;
			})
		} else {
			fpage.innerHTML = cache[pageNum];
		}
	}
	setPage(1); // 默认执行
</script>

仔细阅读上面的代码，您会发现下面现象：

1、setPage(pageNum) 是一个从数据库中提取数据的 JS 函数接口；

2、Ajax 是通过 article.PHP 文件来获取数据；

3、article.PHP?page=xx，这里的 xx 就是所要取得的页码数据，

setPage(1)：就是取得第1页数据；

setPage(2)：就是取得第2页数据；

setPage(100)：就是取得第100页数据；

……

那么，如何从 article.PHP 文件中取得数据呢？请看下面代码清单。

article.PHP

<?PHP
/**
* $Id: article.PHP
* author Lee.
* Last modify $Date: 2012-01-21 16:53:05 $
*/
require_once './config.inc.PHP';
$m = new Model();
$page = new ajaxPage($m->total('article'),20); // $m->total('article') 获取 article 表的记录数；10为每页显示十条
$result = $m->fetchAll('article','*','',$page->limit); // 取出数据，^_^，很方便吧
echo '<table align="center" border="1" width="1100"bordercolor="#666">';
echo '<caption><h1>华强电子网资讯</h1></caption>';
echo '<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>';
foreach ($result as $v) {
	echo "<tr height='21'><td align='center'>{$v['id']}</td><td>{$v['title']}</td><td align='center'>{$v['author']}</td><td align='center'>{$v['source']}</td><td align='center'>{$v['date']}</td></tr>";
}
echo '<tr><td align="right" colspan="5">'.$page->fpage().'</td></tr>';
echo '</table>';
?>

article.PHP 中连接的数据是前面文章从华强电子网抓来的资讯数据，因为数据比较大，代码打包下载中会附加 article.sql 文件，以便大家测试。

静态页面 index.html 上显示的数据就是 article.PHP 文件中 echo 的代码。

代码文件中的 config.inc.PHP 文件主要就是定义一些常量，比如：数据库用户名、数据库密码、主机……，数据库连接类库（Db.class.PHP）和数据库操作类库（Model.class.PHP），请参考文章http://www.jb51.cc/article/p-zdbwkjkw-no.html，附有使用方法。

程序效果图：

下图标注的是注意关注的地方。


这样，Ajax 无刷新分页就完成了。程序中还有一个 ajaxPage.class.PHP 没有说明，其实，这个 ajaxPage 类库的使用方法和一般的分页类库是一样的。

即：$page = new ajaxPage(记录总数,每页显示数);

具体细节请大家下载代码阅读即可。

代码打包下载：【点击下载】

ajax_json_存储过程_无刷新分页功能

ajax_json_存储过程_无刷新分页功能

总结

以上是小编为你收集整理的ajax_json_存储过程_无刷新分页功能全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

ajax实现无刷新分页

ajax实现无刷新分页

总结

以上是小编为你收集整理的ajax实现无刷新分页全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

ajax实现无刷新分页(php)

ajax实现无刷新分页(php)

<div><adata="70690"id="copybut70690" onclick="doCopy('code70690')"> 代码如下:

关于loner_li AJax 实现数据的 无刷新分页 实例和引用web服务文件和存储过程的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于Ajax 实现无刷新分页、ajax_json_存储过程_无刷新分页功能、ajax实现无刷新分页、ajax实现无刷新分页(php)的相关信息，请在本站寻找。

本文标签：

上一篇DWR中获取Session（dw select）

下一篇调用ajax，返回json， 报异常 java.lang.OutOfMemoryError: Java heap space（ajax处理返回的json）

相关文章