jQuery插件pagination实现无刷新分页
这篇文章我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页，使用jQuery pagination主要作用在于分页样式的显示，而无刷新的主要原理还是使用Ajax，具体看下文：
首先，我们引入jQuery文件、jQuery pagination文件和jQuery Templates文件。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://www.jquery001.com/js/jquery.tmpl.js" type="text/javascript"></script> <script src="http://www.jquery001.com/js/jquery.pagination.js" type="text/javascript"></script>
接下来，先看看HTML标记，分别用来呈现数据项和分页样式显示，如下：
<!--显示列表-->
<div id="content-left"></div>
<!--分页样式显示-->
<div id="Pagination" class="pagination"></div>
<!--jQuery Templates-->
<script id="Template" type="text/html">
<div class="item">
<h3><a href="${Url}" target="_blank">${Title}</a></h3>
<p>${Subject}</p>
</div>
</script>
下边就需要取得我们所需要的数据了，如果你看过前两篇jQuery Templates的文章，你就会意识到我们需要返回javascript对象来进行数据的绑定，这里我们还是返回JSON。主要还是用拼串的形式最终返回如下JSON结构：
var req={
"articlelist":
[
{"Title":"文章标题1","Url":"文章Url1","Subject":"文章概要1"},
{"Title":"文章标题2","Url":"文章Url2","Subject":"文章概要2"},
{"Title":"文章标题3","Url":"文章Url3","Subject":"文章概要3"}
]
};
为了方便很多新学习JSON的朋友，在这里给出点后台输出JSON的C#代码，如下：
if (dt != null && dt.Rows.Count > 0)
{
StringBuilder strResult = new StringBuilder();
strResult.Append("{\"articlelist\":[");
foreach (DataRow dr in dt.Rows)
{
strResult.Append("{\"Title\":\"" + dr["Title"].ToString() + "\",");
strResult.Append("\"Url\":\"" + dr["Url"].ToString() + "\",");
strResult.Append("\"Subject\":\"" + dr["Subject"].ToString() + "\"},");
}
//移除末尾','
strResult.Remove(strResult.Length - 1, 1);
strResult.Append("]}");
//输出json
Response.Write(strResult.ToString());
Response.End();
}
关于JSON本站中已经有很多次提到了，如果有不了解的可以找找。这样当我们使用"articlelist"时，它就相当于一个对象数组，使得我们很容易的能绑定数据。下边是前台代码：
$(document).ready(function () {
//TotalNum 总数 这里写死了
var TotalNum = 200;
//首次加载
pageselectCallback(0);
//分页事件
$("#Pagination").pagination(200, {
prev_text: "上一页",
next_text: "下一页",
num_edge_entries: 2,
num_display_entries: 8,
//回调
callback: pageselectCallback
});
function pageselectCallback(page) {
var result = "";
$.ajax({
type: "post",
dataType: "json",
url: "getdata.aspx", //请求的url
data: { "page": parseInt(page + 1) },
success: function (req) {
//使用微软jQuery Templates绑定数据列表,实现了HTML与js分离,使得页面整洁
$("#content-left").html($("#Template").render(req.articlelist));
}
});
}
});
这样，我们就使用jQuery pagination实现了无刷新分页，文中并没有过多的介绍jQuery pagination，而是将侧重点置于jQuery Templates的使用，但也希望对大家有一定的帮助。
相关推荐
-
jQuery EasyUI Pagination实现分页的常用方法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一.使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Convert.ToInt32(Request["rows"]); int pageN
-
jquery pagination插件实现无刷新分页代码
先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo
-
jquery分页插件jquery.pagination.js实现无刷新分页
本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下 1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值
-
jQuery EasyUI API 中文文档 - Pagination分页
用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法 复制代码 代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值 total n
-
jquery.pagination.js 无刷新分页实现步骤分享
1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为 复制代码 代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(
-
Ajax分页插件Pagination从前台jQuery到后端java总结
困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
-
Jquery 分页插件之Jquery Pagination
实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式
-
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex
-
PHP框架Laravel插件Pagination实现自定义分页
Laravel 的分页很方便,其实扩展起来也挺容易的,下面就来做个示例,扩展一下 paginate() 和 simplePaginate() 方法,来实现我们自定义分页样式,比如显示 "上一页" 和 "下一页" ,而不是 "<" 和 ">" ,当然扩展的方法掌握了你就可以肆无忌惮的扩展一个你想要的分页了,比如跳转到某一页,分页显示一共多少记录,当前显示的记录范围等等巴拉巴拉的... 5.1和5.2应该是同样的方法,
-
jQuery插件pagination实现无刷新分页
这篇文章我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页,使用jQuery pagination主要作用在于分页样式的显示,而无刷新的主要原理还是使用Ajax,具体看下文: 首先,我们引入jQuery文件.jQuery pagination文件和jQuery Templates文件. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquer
-
jquery插件pagination实现无刷新ajax分页
1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version
-
jQuery插件jPaginate实现无刷新分页
jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动. PHP读取第一页数据: <div id="pagetxt"> <?php $query = mysql_query("select id,title,addtime from article order by id desc limit 0, 6"); while ($
-
asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
-
asp.net jquery无刷新分页插件(jquery.pagination.js)
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表 2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul
-
JQuery+Ajax无刷新分页的实例代码
先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单 就四个字段 分别是News_id News_title News_time News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server"> <title>JQuery无刷新分页</title> <link hre
-
jQuery实现ajax无刷新分页页码控件
这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是
-
asp.net Mvc4 使用ajax结合分页插件实现无刷新分页
本文为在mvc4中使用ajax实现无刷新分页demo,记录一下. 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器,后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据.后端控制器处理完后利用PartialView方法把数据返回到分部视图中,利用ViewBag来返回总记录数和pageSize.ajax通过回调函数把控制器返回的分部视图内容加载到主视图中显示. 说明:分页具体的分页导航和样式使用了kkp