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 相关文章推荐
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
js实现随机数小游戏
Jun 28 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
json.stringify()与json.parse()的区别以及用处
Jan 25 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
咖啡的化学
2021/03/03 咖啡文化
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
webpack多页面开发实践
2017/12/18 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
linux下python抓屏实现方法
2015/05/22 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
通过cmd进入python的实例操作
2019/06/26 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
Python使用type动态创建类操作示例
2020/02/29 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
安全生产网格化管理实施方案
2014/03/01 职场文书
党支部承诺书范文
2014/03/28 职场文书
2014年政协工作总结
2014/12/09 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
幽灵公主观后感
2015/06/09 职场文书
高一地理教学工作总结
2015/08/12 职场文书
2016入党心得体会范文
2016/01/06 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js