Implémentation simple du plug-in de pagination jquery ajax

Implémentation simple du plug-in de pagination jquery ajax_jquery

WBOY

Libérer： 2016-05-16 15:17:45

original

1312 Les gens l'ont consulté

En parlant du plug-in de pagination ajax basé sur jQuery, jetons d'abord un coup d'œil à la structure principale du code :

1. Définissez d'abord un objet pager :

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

Copier après la connexion

L'objet

contient les propriétés de pagination et les méthodes utilisées. doPage() est la méthode principale de pagination.

2. Développez jQuery

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

Copier après la connexion

3. Utilisation des plug-ins

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

 </body>

Copier après la connexion

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

   
  })

Copier après la connexion

Avez-vous constaté que la méthode d'utilisation est fondamentalement la même que l'utilisation directe d'ajax ?

Enfin on peut voir l'effet : (Ce serait moche si le style du tableau n'est pas défini. Vous pouvez également modifier le fichier css selon vos besoins pour le style de pagination)

F12 ouvre l'outil de débogage et cliquez sur pagination pour afficher les requêtes et réponses envoyées :

PageIndex et pageSize sont les paramètres par défaut du plug-in, qui peuvent être obtenus directement dans la Request en arrière-plan. Il est particulièrement important de noter que la réponse du plug-in doit également suivre un format spécifique {"total":0,"items":[]} Comme le montre la figure ci-dessus, total représente le nombre total d'enregistrements de données. et les éléments représentent des données paginées.

Voici uniquement la structure générale du code et les effets présentés. Vous souhaiterez peut-être d'abord l'implémenter vous-même.