• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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 ListModel.T_News1> GetListAjax(int pagesize,int pageindex)
        {
          BLL.T_News1 bnews = new BLL.T_News1();
          DataTable dt = bnews.GetListDataTable(pagesize,pageindex);
          ListModel.T_News1> list = new ListModel.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弹出在页面上的方法
    • javascript结合ajax读取txt文件内容
    • Ajax分页插件Pagination从前台jQuery到后端java总结
    • jQuery DataTables插件自定义Ajax分页实例解析
    • Ajax读取txt并对txt内容进行分页显示功能
    上一篇:ajax实现无刷新省市县三级联动
    下一篇:如何使用AJAX实现按需加载【推荐】
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    ajax无刷新分页的简单实现 ajax,无,刷新,分页,的,简单,