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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
jQuery实现跨域
Feb 03 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
javascript实现五星评分功能
Nov 10 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
js调用网络摄像头的方法
Dec 05 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/05/07 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python 多进程和数据传递的理解
2017/10/09 Python
用Python实现KNN分类算法
2017/12/22 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
对python的输出和输出格式详解
2018/12/08 Python
Python实现代码统计工具
2019/09/19 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
GWT的应用有哪两种部署模式
2012/12/21 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
运动会广播稿200米
2014/01/27 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
股东合作协议书
2014/04/14 职场文书
清洁工岗位职责
2015/02/13 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
大学生入党自传2015
2015/06/26 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android