Pelaksanaan mudah jquery ajax paging plug-in

Pelaksanaan mudah jquery ajax paging plug-in_jquery

WBOY

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

asal

1309 orang telah melayarinya

Bercakap tentang pemalam paging ajax berdasarkan jQuery, mari kita lihat struktur kod utama dahulu:

1. Tentukan objek kelui:

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

Salin selepas log masuk

Objek

mengandungi sifat paging dan kaedah yang digunakan doPage() ialah kaedah teras paging.

2. Kembangkan jQuery

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

Salin selepas log masuk

3. Penggunaan pemalam

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

 </body>

Salin selepas log masuk

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

   
  })

Salin selepas log masuk

Adakah anda mendapati bahawa kaedah penggunaan pada dasarnya sama seperti menggunakan ajax secara langsung?

Akhirnya kita dapat melihat kesannya: (Ia akan menjadi hodoh jika gaya jadual tidak ditetapkan. Anda juga boleh mengubah suai fail css mengikut keperluan anda untuk gaya penomboran)

F12 membuka alat penyahpepijatan dan klik halaman untuk melihat permintaan dan respons yang dihantar:

PageIndex dan pageSize ialah parameter lalai pemalam, yang boleh diperolehi terus dalam Permintaan di latar belakang. Adalah penting untuk ambil perhatian bahawa respons pemalam juga perlu mengikut format tertentu {"total":0,"items":[]}. dan item mewakili data bernombor.

Berikut ialah struktur umum kod dan kesan yang dibentangkan anda mungkin ingin melaksanakannya sendiri terlebih dahulu.