Home > Article > Web Front-end > Simple implementation of jquery ajax paging plug-in_jquery

Simple implementation of jquery ajax paging plug-in_jquery

WBOYOriginal: 2016-05-16 15:17:451276browse

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

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

3. Use of plug-ins

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

 </body>

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

   
  })

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Page changing tab bar effect implemented by jQuery+css_jqueryNext article：Page changing tab bar effect implemented by jQuery+css_jquery

See more

Simple implementation of jquery ajax paging plug-in_jquery

Related articles