本文实例讲述了jQuery实现的分页插件。分享给大家供大家参考，具体如下：

呈现

html文件

Insert title here

var pages=10; //计算出总页数(一定要是5的倍数)

function getData(num){

/*当前页数*/

var currentPageNum = num;

/*取数据*/

$.ajax({

type: "post",

url: url, /*请求的servlet的地址*/

data: {"currentPageNum":currentPageNum},

cache: false,

async : false,

dataType: "json",

success: function (data ,textStatus, jqXHR)

{

if("true"==data.flag){

setData(data.data);

}else{

console.log("不合法！错误信息如下："+data.errorMsg);

}

},

error:function (XMLHttpRequest, textStatus, errorThrown) {

console.log("请求失败！");

}

});

}

function setData(data){

/*放数据*/

}

css文件

@charset "UTF-8";

/*分页所在的div*/

.devidePage{

margin-top:300px;

margin-left: 400px;

height: 50px;

width: 800px;

/* background: gray; */

}

/*显示页数的div*/

.pages{

float:left;

margin-left:2px;

height:50px;

width:50px;

background: #EEEEEE;

text-align:center;

line-height:50px;

cursor:pointer;

}

/*首页*/

.theFirstPage{

float:left;

margin-left:2px;

height:50px;

width:50px;

background: #EEEEEE;

text-align:center;

line-height:50px;

cursor:pointer;

}

/*末页*/

.theLastPage{

float:left;

margin-left:2px;

height:50px;

width:50px;

background: #EEEEEE;

text-align:center;

line-height:50px;

cursor:pointer;

}

/*上一页*/

.prePage{

float:left;

margin-left:2px;

height:50px;

width:50px;

background: #EEEEEE;

text-align:center;

line-height:50px;

cursor:pointer;

}

/*下一页*/

.nextPage{

float:left;

margin-left:2px;

height:50px;

width:50px;

background: #EEEEEE;

text-align:center;

line-height:50px;

cursor:pointer;

}

/*当前页数*/

.currentPage{

float:left;

margin-left:2px;

height:50px;

width:100px;

background: #EEEEEE;

text-align:center;

line-height:50px;

}

/*总页数*/

.pageNums{

float:left;

margin-left:2px;

height:50px;

width:100px;

background: #EEEEEE;

text-align:center;

line-height:50px;

}

/*输入页数*/

.jump{

float:left;

margin-left:2px;

height:48px;

width:50px;

border:0.5px solid #EEEEEE;

}

/*跳转*/

.jumpClick{

float:left;

margin-left:2px;

height:50px;

width:50px;

background: #EEEEEE;

text-align:center;

line-height:50px;

cursor:pointer;

}

js文件

/**

* 侠 2018-8-15

*/

function loadAll() {

var theFirstPage = "

首页

";

var prePage = "

上一页

";

var pagess = "

1

"

+ "

2

"

+ "

3

"

+ "

4

"

+ "

5

";

var nextPage = "

下一页

";

var theLastPage = "

末页

";

var currentPages = "

第1页

";

var pageNums = "

共" + pages

+ "页

";

var jump = "

+"οnkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\""

+" οnblur=\"this.v();\">";

var jumpClick = "

跳转

";

$("#pages").html(theFirstPage +

prePage + pagess + nextPage + theLastPage + currentPages + pageNums + jump

+ jumpClick);

}

loadAll();

function defultBackground() {

$("#page_1").css("background", "#66b2ff"); //配置选中颜色

}

defultBackground();

function changeBackground() {

$(".pages").css("background", "#EEEEEE"); //配置默认颜色

for (var i = 0; i < 5; i++) {

if ($("#page_" + (i + 1)).text() == $("#currentPage").text().split("第")[1]

.split("页")[0]) {

$("#page_" + (i + 1)).css("background", "#66b2ff"); //配置选中颜色

break;

}

}

}

function theFirstPage(){

$('#currentPage').html("第" + 1 + "页");

$("#page_1").html(1);

$("#page_2").html(2);

$("#page_3").html(3);

$("#page_4").html(4);

$("#page_5").html(5);

changeBackground();

getData(getCurrentPageNum());

}

function theLastPage(){

$('#currentPage').html("第" + pages + "页");

$("#page_1").html(pages-4);

$("#page_2").html(pages-3);

$("#page_3").html(pages-2);

$("#page_4").html(pages-1);

$("#page_5").html(pages);

changeBackground();

getData(getCurrentPageNum());

}

function changePage(id) {

var pagenum = parseInt($("#" + id).text()) - 1;

$('#currentPage').html("第" + $("#" + id).text() + "页");

if ((id.split("_")[1] == 1) && (parseInt($("#" + id).text()) > 1)) {

$("#page_1").html(parseInt($("#page_1").text()) - 1);

$("#page_2").html(parseInt($("#page_2").text()) - 1);

$("#page_3").html(parseInt($("#page_3").text()) - 1);

$("#page_4").html(parseInt($("#page_4").text()) - 1);

$("#page_5").html(parseInt($("#page_5").text()) - 1);

}

if ((id.split("_")[1] == 5) && (parseInt($("#" + id).text()) < pages)) {

$("#page_1").html(parseInt($("#page_1").text()) + 1);

$("#page_2").html(parseInt($("#page_2").text()) + 1);

$("#page_3").html(parseInt($("#page_3").text()) + 1);

$("#page_4").html(parseInt($("#page_4").text()) + 1);

$("#page_5").html(parseInt($("#page_5").text()) + 1);

}

changeBackground();

getData(getCurrentPageNum());

}

function prePage() {

var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0];

var currentPageNum = parseInt(currentPageNumStr);

if (currentPageNum > 1) {

var toPageNum = currentPageNum - 1;

$("#currentPage").html("第" + toPageNum + "页");

if ((currentPageNum > 1) && ($("#page_1").text() != 1)) {

$("#page_1").html(parseInt($("#page_1").text()) - 1);

$("#page_2").html(parseInt($("#page_2").text()) - 1);

$("#page_3").html(parseInt($("#page_3").text()) - 1);

$("#page_4").html(parseInt($("#page_4").text()) - 1);

$("#page_5").html(parseInt($("#page_5").text()) - 1);

}

changeBackground();

getData(getCurrentPageNum());

} else {

}

}

function nextPage() {

var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0];

var currentPageNum = parseInt(currentPageNumStr);

if (currentPageNum < pages) {

var toPageNum = currentPageNum + 1;

$("#currentPage").html("第" + toPageNum + "页");

if (currentPageNum >= 5 && ($("#page_5").text() != pages)) {

$("#page_1").html(parseInt($("#page_1").text()) + 1);

$("#page_2").html(parseInt($("#page_2").text()) + 1);

$("#page_3").html(parseInt($("#page_3").text()) + 1);

$("#page_4").html(parseInt($("#page_4").text()) + 1);

$("#page_5").html(parseInt($("#page_5").text()) + 1);

}

changeBackground();

getData(getCurrentPageNum());

} else {

}

}

function jump() {

var numstr = $("#jump").val();

var num = parseInt(numstr);

if ((num < 1) || (num > pages)) {

alert("输入不合法");

$("#jump").val(1);

} else {

$("#currentPage").html("第" + num + "页");

if (num >= 5) {

$("#page_5").html(num);

$("#page_4").html(num - 1);

$("#page_3").html(num - 2);

$("#page_2").html(num - 3);

$("#page_1").html(num - 4);

} else {

if (num = 4) {

$("#page_5").html(num + 1);

$("#page_4").html(num);

$("#page_3").html(num - 1);

$("#page_2").html(num - 2);

$("#page_1").html(num - 3);

}

if (num = 3) {

$("#page_5").html(num + 2);

$("#page_4").html(num + 1);

$("#page_3").html(num);

$("#page_2").html(num - 1);

$("#page_1").html(num - 2);

}

if (num = 2) {

$("#page_5").html(num + 3);

$("#page_4").html(num + 2);

$("#page_3").html(num + 1);

$("#page_2").html(num);

$("#page_1").html(num - 1);

}

if (num = 1) {

$("#page_5").html(num + 4);

$("#page_4").html(num + 3);

$("#page_3").html(num + 2);

$("#page_2").html(num + 1);

$("#page_1").html(num);

}

}

changeBackground();

getData(getCurrentPageNum());

}

}

function getCurrentPageNum(){

return parseInt( $("#currentPage").text().split("第")[1].split("页")[0] );

}

希望本文所述对大家jQuery程序设计有所帮助。

java jquery 分页插件怎样实现_jQuery实现的分页插件完整示例相关推荐

  1. jq分页 不刷新页面_jQuery无刷新分页完整实例代码

    本文实例讲述了jQuery无刷新分页实现方法.分享给大家供大家参考,具体如下: 这款jQuery分页示例,是分页经典形式,兼容性也做的好,网页上的分页代码,分享给大家. 运行效果截图如下: 在线演示地 ...

  2. jq分页 不刷新页面_jquery无刷新分页

    希望有机会能和大家一起交流学习,220897863程序员之家群欢迎大家加入 在现在的项目中使用jquery实现无刷新的分页,数据库采用存储过程进行分页,具体代码就不说了,主要看前段的实现 PageCh ...

  3. mvc php 分页,MVC+jQuery.Ajax异步实现增删改查和分页_jquery

    本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; u ...

  4. jquery的validate表单验证表单注册插件

    这款插件非常好用! 首先导入插件: <script src="js/jquery.validate.min.js" type="text/javascript&qu ...

  5. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  6. html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件

    这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件.当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容.这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能 ...

  7. mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页 简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...

  8. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  9. jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...

    首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 ...

最新文章

  1. 光流估计：从传统方法到深度学习
  2. UA SIE545 优化理论基础0 优化建模7 二值变量的应用
  3. frp 0.11.0 发布新版，支持很多新功能
  4. poj 1947(树形dp+背包问题)
  5. codeup 1943进制转换
  6. 走向.NET架构设计—第四章—业务层分层架构（前篇）
  7. 参加动画电影《魔比斯环》首映
  8. 测试Spring Boot有条件的合理方式
  9. java中字母用什么单词赋值_Java初学
  10. 《百面机器学习》读书笔记
  11. 第一台通用计算机它的名字叫做什么,第一台计算机叫什么名字
  12. u3d_shader_surface_shader_2
  13. mysql 获取百分比函数，并对结果保留2位小数。
  14. 胡雪岩与王有龄交浅言深的那些事
  15. ffmpeg命令下载MP4视频)
  16. idcard detection using opencv
  17. 不会编程也能爬数据！3个爬虫小工具教你实现~
  18. 计算机辅助设计ca,《AutoCA计算机辅助设计》课程标准.doc
  19. 湖仓一体：数据湖vs数据仓库之争？
  20. 【MATLAB教程案例7】基于Gardner环的定时误差检测matlab仿真

热门文章

  1. 前端学习笔记之——初探HTML5
  2. 人真的具备独立思考的能力？
  3. UVa 10557 - XYZZY
  4. 一个技术主管/团队Leader的工作职责有哪些？
  5. Java中System.loadLibrary() 的执行过程
  6. 运行一个C语言程序的步骤
  7. 计算机硬盘休眠更改,win7不让硬盘进入休眠状态的方法步骤
  8. 数学 {实质条件,前件,后件,逆命题,否命题,逆否命题,语义蕴涵}
  9. golang支付宝支付生成签名
  10. 不用辅助空间的归并排序