ajax無重新整理分頁的簡單實現

ajax無重新整理分頁的簡單實現_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體為大家分享了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無重新整理分頁實現的關鍵代碼，希望對大家的學習有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More