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 相关文章推荐
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python学习笔记_数据排序方法
2014/05/22 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python获取引用对象的个数方式
2019/12/20 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
服务宗旨标语
2014/07/01 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
鲁迅故居导游词
2015/02/05 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书