Simple implementation of jquery ajax paging plug-in

Simple implementation of jquery ajax paging plug-in_jquery

WBOY

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

Original

1305 people have browsed it

Speaking of the ajax paging plug-in based on jQuery, let’s take a look at the main code structure first:

1. First define a pager object:

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

Copy after login

The

object contains paging properties and methods used. doPage() is the core method of paging.

2. Expand jQuery

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

Copy after login

3. Use of plug-ins

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

 </body>

Copy after login

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

   
  })

Copy after login

Have you found that the usage method is basically the same as using ajax directly?

Finally we can see the effect: (It would be ugly if the table style is not set. You can also modify the css file according to your needs for the pagination style)

F12 opens the debugging tool and click paging to view the sent requests and responses:

PageIndex and pageSize are the default parameters of the plug-in, which can be obtained directly in the Request in the background. It is particularly important to note that the plug-in's response also needs to follow a specific format {"total":0,"items":[]}. As shown in the figure above, total represents the total number of data records, and items represents paginated data.

Here is only the general structure of the code and the effects presented. You may wish to implement it yourself first.