suchen

Heim  >  Artikel  >  Web-Frontend  >  Einfache Implementierung des JQuery-Ajax-Paging-Plug-Ins_JQuery

Einfache Implementierung des JQuery-Ajax-Paging-Plug-Ins_JQuery

WBOY
WBOYOriginal
2016-05-16 15:17:451287Durchsuche

Apropos Ajax-Paging-Plug-in auf Basis von jQuery: Schauen wir uns zunächst die Hauptcodestruktur an:

1. Definieren Sie zunächst ein Pager-Objekt: 

var sjPager = window.sjPager = {
  opts: {
   //默认属性
   pageSize: 10,
   preText: "pre",
   nextText: "next",
   firstText: "First",
   lastText: "Last",
   shiftingLeft: 3,
   shiftingRight: 3,
   preLeast: 2,
   nextLeast: 2,
   showFirst: true,
   showLast: true,
   url: "",
   type: "POST",
   dataType: "JSON",
   searchParam: {},
   beforeSend: null,
   success: null,
   complete: null,
   error: function () {
    alert("抱歉,请求出错,请重新请求！");
   },
  },
  pagerElement: null,//分页dom元素
  commonHtmlText: {
   //公共文本变量
  },
  init: function (obj, op) {
   //对象初始化
  },
  doPage: function (index, pageSize, searchParam) {
   //执行分页方法
  },
  getTotalPage: function () {
   //获取总页数
  },
  createPreAndFirstBtn: function (pageTextArr) {
   //创建上一页、首页按钮链接
  },
  createNextAndLastBtn: function (pageTextArr) {
   //创建下一页、尾页按钮链接
  },
  createIndexBtn: function (pageTextArr) {
   //中间分页索引按钮链接
  },
  renderHtml: function (pageTextArr) {
   //渲染分页控件到页面
  },
  createSpan: function (text, className) {
   //创建span
  },
  createIndexText: function (index, text) {
   //创建索引文本
  },
  jumpToPage: function () {
   //跳转到
  }
 }
Das

-Objekt enthält Paging-Eigenschaften und verwendete Methoden. doPage() ist die Kernmethode des Paging.

2. Erweitern Sie jQuery

$.fn.sjAjaxPager = function (option) {
    return sjPager.init($(this), option);
  };

3. Verwendung von Plug-Ins

 <body>
   
  <table id="dataTable" border="1px"></table>
  <div id="pager"></div>

 </body>

$(function() {
   $('#pager').sjAjaxPager({
    url: "Handler1.ashx",
    pageSize: 10,
    searchParam: {
     /*
     * 如果有其他的查询条件，直接在这里传入即可
     */
     id: 1,
     name:'test',
    },
    beforeSend: function () {
    },
    success: function (data) {
     /*
     *返回的数据根据自己需要处理
     */
     var tableStr = "<tr><td>Id</td><td>姓名</td><td>年龄</td></tr>";
     $.each(data.items, function(i,v) {
      tableStr += "<tr><td>" + v.Id + "</td><td>" + v.Name + "</td><td>" + v.Age + "</td></tr>";
     });

     $('#dataTable').html(tableStr);
    },
    complete: function () {
    }
   });

   
  })

Haben Sie festgestellt, dass die Verwendungsmethode im Grunde dieselbe ist wie die direkte Verwendung von Ajax?

Endlich können wir den Effekt sehen: (Es wäre hässlich, wenn der Tabellenstil nicht festgelegt wäre. Sie können die CSS-Datei auch entsprechend Ihren Anforderungen an den Paginierungsstil ändern)

F12 öffnet das Debugging-Tool und klickt auf „Paging“, um die gesendeten Anfragen und Antworten anzuzeigen:

　

　

PageIndex und pageSize sind die Standardparameter des Plug-Ins, die direkt im Request im Hintergrund abgerufen werden können. Es ist besonders wichtig zu beachten, dass die Antwort des Plug-Ins auch einem bestimmten Format folgen muss: {"total":0,"items":[]} Wie in der Abbildung oben dargestellt, stellt „total“ die Gesamtzahl der Datensätze dar. und Elemente stellen paginierte Daten dar.

Hier ist nur die allgemeine Struktur des Codes und die vorgestellten Effekte. Möglicherweise möchten Sie ihn zuerst selbst implementieren.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Durch jQuery css_jquery implementierter Seitenwechsel-Tab-LeisteneffektNächster Artikel：Durch jQuery css_jquery implementierter Seitenwechsel-Tab-Leisteneffekt

In Verbindung stehende Artikel

Mehr sehen