快捷導(dǎo)航

ajax無刷新分頁的簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2016年05月11日 09:57:27 作者：wangjingjing1014

這篇文章主要為大家詳細(xì)介紹了ajax無刷新分頁的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了ajax無刷新分頁的具體代碼，供大家參考，具體內(nèi)容如下

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;
      /*如果將代碼封裝成一個(gè)函數(shù)，那么除非顯示調(diào)用(loaddata())，否則函數(shù)中的代碼不會(huì)執(zhí)行
      根據(jù)傳遞的頁碼和每頁顯示的記錄數(shù)量獲取數(shù)據(jù)
      */
      function loaddata() {
        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetListAjax",
          data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
          success: function (result) {
            //處理返回來的數(shù)據(jù)
            var strtable = '<table>';
            strtable += '<tr><td>編號(hào)</td><td>標(biāo)題</td><td>內(nèi)容</td><td>創(chuàng)建時(shí)間</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);
          }


        })


      }
      //根據(jù)傳遞到后臺(tái)的每頁顯示的記錄數(shù)量來獲取最大的頁碼(就是一共有多少頁)
      $.ajax({
        type: "post",
        contentType: "application/json",
        url: "WebService1.asmx/GetLastPageindex",
        data: "{pagesize:" + pagesize + "}",
        success: function (result) {
          lastpageindex = result.d;
        }
      })


      //顯式調(diào)用函數(shù)，在頁面初次加載時(shí)加載第一頁數(shù)據(jù)
      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 從腳本中調(diào)用此 Web 服務(wù)，請(qǐng)取消對(duì)下行的注釋。
  [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無刷新分頁實(shí)現(xiàn)的關(guān)鍵代碼，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: