jQuery ajax分页插件实例代码


Posted in Javascript onJanuary 27, 2016

推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶

既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述、介绍也

比不上代码来得实在。)

1、首先定义一个pager对象:

var sjPager = window.sjPager = {
opts: {
//默认属性
pageSize: ,
preText: "pre",
nextText: "next",
firstText: "First",
lastText: "Last",
shiftingLeft: ,
shiftingRight: ,
preLeast: ,
nextLeast: ,
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="px"></table>
<div id="pager"></div>
</body> 
$(function() {
$('#pager').sjAjaxPager({
url: "Handler.ashx",
pageSize: ,
searchParam: {
/*
* 如果有其他的查询条件,直接在这里传入即可
*/
id: ,
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分页插件实例代码

jQuery ajax分页插件实例代码

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

jQuery ajax分页插件实例代码

jQuery ajax分页插件实例代码

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

下面在来看一个jquery ajax分页插件的例子

对1.0版进行了重构,去掉了一些花销的功能,优化了页面样式,现有功能:

1)、一次性把数据加载到页面内存,在页面进行分页。
2)、使用jquery的ajax每次从服务器取数据分页。
3)、支持自定义分页条样式,插件默认实现两种样式可供选择。

<table id="table2" > 
<thead> 
<tr><th width="200px">网站名称</th> 
<th width="100px">网址</th> 
<th width="100px">知名度</th> 
<th width="120px">访问量</th> 
</tr> 
</thead> 
<tbody></tbody> 
</table> 
$("#table2").bigPage({ajaxData:{url:"ajax.php"}});
Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
JS定时器实例
Apr 17 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 #Javascript
jquery ajax分页插件的简单实现
Jan 27 #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
You might like
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
JavaScript 学习技巧
2010/02/17 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
Python3基础之输入和输出实例分析
2014/08/18 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
简单的python后台管理程序
2017/04/13 Python
python实现百度语音识别api
2018/04/10 Python
Python用for循环实现九九乘法表
2018/05/31 Python
详解Python字典的操作
2019/03/04 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
Python 实现一个简单的web服务器
2021/01/03 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
springboot实现string转json json里面带数组
2022/06/16 Java/Android