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

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

WBOY

Freigeben： 2016-05-16 15:17:45

Original

1314 Leute haben es durchsucht

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 () {
   //跳转到
  }
 }

Nach dem Login kopieren

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);
  };

Nach dem Login kopieren

3. Verwendung von Plug-Ins

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

 </body>

Nach dem Login kopieren

$(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 () {
    }
   });

   
  })

Nach dem Login kopieren

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.