Heim Web-Frontend js-Tutorial Einfache Implementierung des JQuery-Ajax-Paging-Plug-Ins_JQuery

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

May 16, 2016 pm 03:17 PM
ajax jquery 分页

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.

Erklärung dieser Website
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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax?

Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

Wie verwende ich die PUT-Anfragemethode in jQuery?

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern

Der beste Weg, die Array-Paginierung in PHP zu implementieren Der beste Weg, die Array-Paginierung in PHP zu implementieren May 04, 2024 pm 02:39 PM

Der beste Weg, die Array-Paginierung in PHP zu implementieren

PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte Jun 06, 2024 pm 01:12 PM

PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte

PHP und Ajax: Möglichkeiten zur Verbesserung der Ajax-Sicherheit PHP und Ajax: Möglichkeiten zur Verbesserung der Ajax-Sicherheit Jun 01, 2024 am 09:34 AM

PHP und Ajax: Möglichkeiten zur Verbesserung der Ajax-Sicherheit

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Feb 29, 2024 am 09:03 AM

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat?

See all articles