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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
uni app仿微信顶部导航条功能
Sep 17 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/01 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
js location.replace与location.reload的区别
2010/09/08 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
5款非常棒的Python工具
2018/01/05 Python
python求最大值最小值方法总结
2019/06/25 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
终端业务员岗位职责
2013/11/27 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
高三英语教学计划
2015/01/23 职场文书
网络管理员岗位职责
2015/02/12 职场文书
美丽心灵观后感
2015/06/01 职场文书
python如何获取网络数据
2021/04/11 Python