jQuery ajax分页插件实例代码
推荐阅读：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文件）
F12打开调试工具，点击分页查看发送的请求及响应：
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"}});
相关推荐
-
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏览详情 在线演示 2. jPaginate: A Fancy jQuery Pagination Plugin jPa
-
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex
-
jquery+css3打造一款ajax分页插件(自写)
最近公司的项目将好多分页改成了ajax的前台分页 以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果 如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现 css3的动画本来就是帮我们取代js中这部分动画代码的 使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var
-
jQuery Ajax 实现分页 kkpager插件实例代码
代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" /> <!--分页组件 JS--> <script type="text/
-
Ajax分页插件Pagination从前台jQuery到后端java总结
困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
-
jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: 10, preText: "pre", nextText: "next", firstText: "First", lastText: "Last", shiftingLeft: 3, shiftingRig
-
jQuery ajax分页插件实例代码
推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶 既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也 比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo
-
Jquery + Ajax调用webService实例代码(asp.net)
webService中要实现ajax调用,则要加这句代码: // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] 代码下载 /201008/yuanma/WebService2.rar 复制代码 代码如下: //无参数调用 $(document).ready(function() { $('#btn1').click(function() { $.ajax({ typ
-
基于Bootstrap和jQuery构建前端分页工具实例代码
前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询
-
jQuery自定义图片上传插件实例代码
摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q
-
基于Bootstrap3表格插件和分页插件实例详解
首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据 下面分页 使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
-
jQuery Pagination分页插件使用方法详解
本文实例为大家分享了jQuery Pagination分页插件的具体代码,供大家参考,具体内容如下 一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src=&quo