ajax无刷新分页的简单实现
本文实例为大家分享了ajax无刷新分页的具体代码，供大家参考，具体内容如下
html页
<html>
<head>
<title></title>
<style type="text/css">
table{ border:solid 1px #444; background-color:Aqua;}
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;
/*如果将代码封装成一个函数，那么除非显示调用(loaddata())，否则函数中的代码不会执行
根据传递的页码和每页显示的记录数量获取数据
*/
function loaddata() {
$.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 + '</td>';
strtable += '</tr>';
}
strtable += '</table>';
$('#mydiv').html(strtable);
}
})
}
//根据传递到后台的每页显示的记录数量来获取最大的页码(就是一共有多少页)
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetLastPageindex",
data: "{pagesize:" + pagesize + "}",
success: function (result) {
lastpageindex = result.d;
}
})
//显式调用函数，在页面初次加载时加载第一页数据
loaddata();
//下一页
$('a:eq(2)').click(function () {
if (pageindex < lastpageindex) {
pageindex++;
loaddata();
}
})
//上一页
$('a:eq(1)').click(function () {
if (pageindex > 1) {
pageindex--;
loaddata();
}
})
//第一页
$('a:first').click(function () {
pageindex = 1;
loaddata();
})
//最后一页
$('a:eq(3)').click(function () {
pageindex = lastpageindex;
loaddata();
})
$('a:last').click(function () {
pageindex = $('#txtPageindex').val();
loaddata();
})
})
</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 分页
{
/// <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 bnews = new BLL.T_News1();
DataTable dt = bnews.GetListDataTable(pagesize,pageindex);
List<Model.T_News1> list = new List<Model.T_News1>();
int Id;
string newstitle = "";
string newscontent = "";
DateTime 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"]);
Model.T_News1 news = new Model.T_News1()
{
Id = Id,
NewsTitle = newstitle,
NewsContent = newscontent,
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;
}
}
}
}
以上就是ajax无刷新分页实现的关键代码，希望对大家的学习有所帮助。
相关推荐
-
使用ajax技术实现txt弹出在页面上的方法
使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window.onload = function(){ /*获取按钮的id*/ var oBth=document.getElementById('btn'); /*点击按钮触发的函数*// oBth.onclick = function(){ /*打开浏览器*/ var xhr = new XMLHttpRequest(); /*在地址栏输入地址,这里的1txt代
-
jQuery DataTables插件自定义Ajax分页实例解析
一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不
-
Ajax分页插件Pagination从前台jQuery到后端java总结
困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
-
Ajax读取txt并对txt内容进行分页显示功能
下文给大家分享了ajax读取txt并对txt内容进行分页显示的核心代码,废话不多说了,直接贴代码了. function TransferString(content) { var string = content; try{ string=string.replace(/\r\n/g,"<BR>") string=string.replace(/\n/g,"<BR>"); string=string.replace(/[ ]/g,"
-
javascript结合ajax读取txt文件内容
代码很简洁,这里就不多废话了,直接上源码 html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"/> </head> <body> <button type="button" onclick="show()">请求数据
-
ajax无刷新分页的简单实现
本文实例为大家分享了ajax无刷新分页的具体代码,供大家参考,具体内容如下 html页 <html> <head> <title></title> <style type="text/css"> table{ border:solid 1px #444; background-color:Aqua;} table td{border:solid 1px #444;} </style> <script src=
-
简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax无刷新分页效果</title> <script type="text/javascript"> function showpage(url) { var xhr = new XML
-
详解PHP+AJAX无刷新分页实现方法
PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLH
-
Ajax无刷新分页的性能优化方法
Ajax无刷新分页,已经是一个大家比较熟悉的事物了,大概就是web前端页面上有一个js的方法,通过Ajax去请求服务器端的分页数据接口,拿到数据后再在页面上创建html结构,展现给用户,类似于下面这样: <script type="text/javascript"> function getPage(pageIndex){ ajax({ url:" RemoteInterface.cgi", method:"get", data:{p
-
jQuery实现ajax无刷新分页页码控件
这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是
-
php+ajax无刷新分页实例详解
本文实例讲述了php+ajax无刷新分页实现方法.分享给大家供大家参考,具体如下: ajax_page_show_userinfo.php页面如下: <meta 'Content:text/html;charset=utf-8'></meta> <title>ajax分页演示</title> <script language="javascript" src="js/ajaxpage.js"></sc
-
JQuery+Ajax无刷新分页的实例代码
先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单 就四个字段 分别是News_id News_title News_time News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server"> <title>JQuery无刷新分页</title> <link hre
-
jquery 插件 web2.0分格的分页脚本，可用于ajax无刷新分页
******生成js分页脚****** ****没剑(2008-03-05)**** 修改日期:2008-3-12 添加两个参数:displaynum,displaylastNum可以自由定制显示的页码数量 参数: pagesize:10 //每页显示的页码数 ,count:0 //数据条数 ,css:"mj_pagefoot" //分页脚css样式类 ,current:1 //当前页码 ,displaynum:7 //中间显示页码数 ,displaylastNum:5 //最后显示的
-
php ajax无刷新分页,支持id定位
<?php Header("Content-Type:text/html; charset=utf-8"); function AjaxPage($Total,$ListNub,$CurrentPage,$Url,$AjaxAction,$HalfPer='',$ViewId='') { //计算总页数 $totalPage = @ceil($Total/$ListNub); $total=$totalPage-1; $re=""; //echo $Curre
-
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
本文实例讲述了PHP+Ajax实现无刷新分页的方法.分享给大家供大家参考,具体如下: 注:这里使用到的一些类库在前面文章都能找到源代码,因此为了缩短文章篇幅,都指明链接所在. 本文讲解内容为: Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/