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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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写入数据库类代码分享
2011/07/26 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php中的ini配置原理详解
2014/10/14 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
js 学习笔记(三)
2009/12/29 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
发布Angular应用至生产环境的方法
2018/12/10 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
高中自我评价分享
2013/12/05 职场文书
医院护士的求职信
2014/01/03 职场文书
清明节随笔
2015/08/15 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书