最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

ajax无刷新分页的简单实现

来源:动视网 责编:小OO 时间:2020-11-27 22:51:55
文档

ajax无刷新分页的简单实现

本文实例为大家分享了ajax无刷新分页的具体代码,供大家参考,具体内容如下:html页;,那么除非显示调用(loaddata()),否则函数中的代码不会执行 根据传递的页码和每页显示的记录数量获取数据 */ function loaddata() { $.ajax({ type: "post".contentType: "application/json".url: "WebService1.asmx/GetListAjax".data: "{pagesize:" + pagesize + "。WebService1.asmx。
推荐度:
导读本文实例为大家分享了ajax无刷新分页的具体代码,供大家参考,具体内容如下:html页;,那么除非显示调用(loaddata()),否则函数中的代码不会执行 根据传递的页码和每页显示的记录数量获取数据 */ function loaddata() { $.ajax({ type: "post".contentType: "application/json".url: "WebService1.asmx/GetListAjax".data: "{pagesize:" + pagesize + "。WebService1.asmx。


本文实例为大家分享了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无刷新分页的具体代码,供大家参考,具体内容如下:html页;,那么除非显示调用(loaddata()),否则函数中的代码不会执行 根据传递的页码和每页显示的记录数量获取数据 */ function loaddata() { $.ajax({ type: "post".contentType: "application/json".url: "WebService1.asmx/GetListAjax".data: "{pagesize:" + pagesize + "。WebService1.asmx。
推荐度:
标签: 简单 实现 分页
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top