jquery ajax分页插件的简单实现


Posted in Javascript onJanuary 27, 2016

说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:

1、首先定义一个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 () {
   //跳转到
  }
 }

对象包含了分页的属性及用到的方法,doPage()为分页的核心方法。

2、进行jQuery扩展

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

3、插件使用

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

   
  })

有没有发现使用方式与直接使用ajax基本是一样一样的?

最后我们可以看下出来的效果:(表格样式没有设置比较丑,分页样式自己也可以根据需要修改css文件)

jquery ajax分页插件的简单实现

F12打开调试工具,点击分页查看发送的请求及响应:

jquery ajax分页插件的简单实现

jquery ajax分页插件的简单实现

pageIndex和pageSize为插件默认的参数,在后台可以直接在Request中获取。特别需要注意的是插件的响应也是需要遵循特定的格式{"total":0,"items":[]},如上图中所示total代表数据总记录数,items代表分页的数据。

这里只有代码的大体结构及呈现的效果,大家不妨自己先动手实现一下。

Javascript 相关文章推荐
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
vue实现全选、反选功能
Nov 17 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 #Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 #Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 #Javascript
jQuery Easyui实现左右布局
Jan 26 #Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 #Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 #Javascript
详解javascript new的运行机制
Jan 26 #Javascript
You might like
相对路径转化成绝对路径
2007/04/10 PHP
php调用shell的方法
2014/11/05 PHP
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python实现爬山算法的思路详解
2019/04/09 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
省级青年文明号申报材料
2014/05/23 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
Node与Python 双向通信的实现代码
2021/07/16 Javascript