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 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
vue2.x 对象劫持的原理实现
Apr 19 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搜索文件程序分享
2015/10/30 PHP
PHP在线书签系统分享
2016/01/04 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
js变量提升深入理解
2016/09/16 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Python 基础知识之字符串处理
2017/01/06 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python实现的矩阵类实例
2017/08/22 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Django REST framework 分页的实现代码
2019/06/19 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
建筑文秘专业个人求职信范文
2013/12/28 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
昆虫记读书笔记
2015/06/26 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript