ajax无刷新分页的简单实现

前端技术 2023/09/05 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无刷新分页实现的关键代码，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/14581

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案