关键词：
说明：这里主要介绍jQuery的分页插件twbsPagination。当然了还有其他的分页插件，感觉上这个插件还是比较简单易用的。
步骤一：建立page.jsp页面，引用jquery.twbsPagination.js,page.js
<script src="<%=basePath%>js/jquery.twbsPagination.js"></script>
<script src="<%=basePath%>js/page.js"></script>
<!--分页-->
<div class="dataTables_paginate paging_bootstrap pagination" id="pagination-on">
<ul id="visible-pages-example-on"></ul>
</div>
<!--分页-->
注意：这里只绘制了一个分页的Div（首页，上一页，下一页，末页）其他的内容自行添加即可。
步骤三：建立page.js文件
var page=1;pagesize=2;//默认加载显示列表
var condition = ‘‘;//查询条件
var state=0;//0：所用用户，1：当前用户
$(function(){
//默认加载
IninPage();
});
//查询列表分页初始化
function IninPage(){
$(‘#visible-pages-example-on‘).remove();
$("#pagination-on").append(‘<ul id="visible-pages-example-on" class="pagination"></ul>‘);
state = 0;
$.ajax({
type : "POST",
async: false,
url : "../../xxxxxxxxx/xxxxxxxxx.do",
dataType : "JSON",
data : {condition:condition,user_state:state},
success : function(msg) {
var total = msg.total;
var pagecount=Math.floor(total/pagesize)+(total%pagesize!=0?1:0);
pagecount=pagecount==0?1:pagecount;
$(‘#visible-pages-example-on‘).twbsPagination({
totalPages: pagecount,
visiblePages: pagecount<2?pagecount:2,
version: ‘1.1‘,
first:"首页",
prev:"上一页",
next:"下一页",
last:"末页",
loop:false,
href:"javascript:void(0)",
onPageClick:function(event,index){
page=index;
getInfoList();//数据查询列表
}
});
},error:function(){
alertLayer("操作失败","error");
}
});
}
//获取数据查询列表
function getInfoList(){
state = 0;
$.ajax({
type : "POST",
url : "../../xxxxxxxxx/xxxxxxxxx.do",
dataType : "json",
async:false,
data : {condition:condition,page:page,pagesize:pagesize,user_state:state},
success : function(msg) {
//该处省略数据显示部分代码
}
});
}
注意：page.js加载时我们要初始化上面几个必要的参数。
步骤四：ajax查询分页数据条数
IninPage();
步骤五：ajax查询分页数据列表
getInfoList();
总结：我们只需要提供几个必要的参数page（显示第几页），pagesize（每页显示条数），查询记录的条数、查询记录的列表即可实现分页功能。
在这个示例中我省略了数据查询部分，在具体应用的时候只需查询记录数total,和记录列表list即可。
jquery分页插件（jquery.pagination.js）ajax实现分页
首先需要引入jQuery再次需要引入<scriptsrc="jquery/jquery.pagination.js"></script>同时也要引入<linkrel="stylesheet"href="css/pagination.css">引入之后，分页基本样子下面看分页配置参数vardefaults={totalData:0,//数据总条数showData: 查看详情
jquery插件实现分页(代码片段)
1QueryPagination分页插件23原项目地址：http://plugins.jquery.com/project/pagination4版本：v1.25源文件下载：英文原版或中文翻译修改版6翻译：张鑫旭7demo实例页面8基本demo页面9Ajaxdemo页面10参数可编辑demo页面11插件简介12此jQuery插件为Ajax分页... 查看详情
jQuery分页插件
】jQuery分页插件【英文标题】：jQueryPaginationPlugin【发布时间】：2010-12-0403:15:39【问题描述】：希望这很容易解决。我在理解jQueryPagination插件时遇到了一些问题。基本上，我要做的就是加载一个PHP文件，然后对结果进行分页。我... 查看详情
ajax分页（jquery分页插件pagination）小例3
<#macroajaxPaginteurl><scripttype="text/javascript">varPageSize=10;//每页行数varIsInit=true;//初始化varsearch=function(pageIndex,initFlag){varurl="${url}";$.ajax({type:‘GET‘,url:url,data:{pageNum 查看详情
使用jquery开发datatable分页表格插件(代码片段)
当系统数据量很大时，前端的分页、异步获取方式就成了较好的解决方案。一直以来，我都希望使用自己开发的jquery插件做系统。 现在，学习了jquery插件开发之后，渐渐地也自己去尝试着开发一些简单的插件，... 查看详情
jquery----分页插件实现
1、效果2、html代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jquery分页插件</title><linkrel="stylesheet"type="text/css"href="css/pagination.less"></head&g 查看详情
基于jquery的插件开发(代码片段)
最近在公司做一个项目，由于后台数据太多需要分页显示，在网上找了很多插件都没有找到合适的分页插件，所有的分页插件始终达不到自己想要的效果。由于这个项目也不是很赶，就在网上查找各种资料，自己写一个基于... 查看详情
超简单实用的前端分页---jquery插件
首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页. 简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理; 而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据.最近,下... 查看详情
问题：使用 jquery 插件 tablesorter 进行表格排序和分页
】问题：使用jquery插件tablesorter进行表格排序和分页【英文标题】：Problem:tablesortingandpaginationwithjqueryplugintablesorter【发布时间】：2010-06-1015:03:16【问题描述】：我有一个有100行的表，它也有分页。每页显示10条记录。我正在使用jq... 查看详情
简单实用的jquery分页插件
在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个jQuery的分页插件，该插件主要实现上下翻页，输入数字跳转等功能。具体实现如下： 输入参数需要当前页码pageNo，总页码totalPage，... 查看详情
在 angularjs 上应用 jquery 插件 dotdotdot 重复分页
】在angularjs上应用jquery插件dotdotdot重复分页【英文标题】：Applyjqueryplugindotdotdotonangularjsrepeatwithpagination【发布时间】：2013-11-0716:25:20【问题描述】：我正在尝试设置一个指令来应用jquery插件dotdotdot。我的问题是我希望它适用于带... 查看详情
如何让这个 jquery 分页插件正常工作
】如何让这个jquery分页插件正常工作【英文标题】：howtogetthisjquerypaginationplugintoworkproperly【发布时间】：2013-02-0608:31:19【问题描述】：我一直试图让这个jQuerypaginationplugin工作。出于某种原因，它没有，我真的不确定为什么。<!... 查看详情
jQuery Lightslider 插件分页器 onclick 事件
】jQueryLightslider插件分页器onclick事件【英文标题】：jQuerylightsliderpluginpageronclickevent【发布时间】：2015-12-0423:16:05【问题描述】：我想获取jquerylightslider插件的pager元素的onclick事件，我试过下面的代码，var$slide=$(\'#light-slider\').paren... 查看详情
没有插件的jQuery Easy分页[关闭]
】没有插件的jQueryEasy分页[关闭]【英文标题】：jQueryEasypaginationwithoutplugin[closed]【发布时间】：2012-11-1905:24:39【问题描述】：所以，我的问题如下。是跟之前的HERE&HERE我使用以下代码从XML动态添加表：$.ajax(type:"GET",url:"../datas/_... 查看详情
如何更改 DataTables jQuery 插件的分页按钮数量
】如何更改DataTablesjQuery插件的分页按钮数量【英文标题】：HowtochangethenumberofpaginationbuttonsoftheDataTablesjQueryplugin【发布时间】：2014-08-1413:10:13【问题描述】：默认情况下，DataTables插件显示7个分页按钮（包括省略号）喜欢上一个123... 查看详情
jquery分页插件(代码片段)
HTML：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8"/>5<title></title>6<style>7/*外面盒子样式---自己定义*/8.page_divmargin:20px10px20px0;color:#6669/*页数按钮样式*/10.pa 查看详情
jquery分页插件封装（源码来自百度，自己封装）
最近由于项目的需要，做了一个基于JQuery的表格分页插件封装，部分源码来源百度，经由自己封装完成。下面是具体代码和说明，仅供参考。第一步可以先将我的HTML，CSS，JS这三部分的代码创建好后先运行看看，下图是文件目录... 查看详情