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

最新推荐文章于 2021-03-13 12:44:54 发布
最新推荐文章于 2021-03-13 12:44:54 发布
阅读量81 收藏
点赞数
文章标签： java jquery 分页插件怎样实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31437055/article/details/114226798
版权

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

呈现

77e13eb1f5d087b12dffee3973fcd2fa.png

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程序设计有所帮助。

Venny Dun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery分页插件使用
H&B Blog
08-09 991
jquery.tabulation.js插件介绍 jquery.tabulation.js是一款兼容bootstrap的jQuery分页插件。该插件可将一组同级元素转换为分页或tabs，提供回调函数，实现可分页功能。 一、jquery.tabulation.js插件使用方法 首先是引入一些基础的资源问价，包括jquery和jquery.tabulation.js文件。 <script src...
jquery实现分页
web前端开发
03-28 597
分页     *{         margin:0;         padding:0;         list-style: none;     }     #pageIt{         width:1300px;         height:50px;         border:1px solid red;         m
jQuery分页插件（实例详尽，简单易用
06-02
jQuery分页插件（实例详尽，简单易用
20 个 jQuery 分页插件和教程，附带实例
weixin_33893473的博客
04-07 238
1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件，但提供很多特性例如自动翻页、键盘和滚动浏览，延迟显示以及完全可定制的导航面板。 查看 示例 2. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。 查看 示例 3. j...
java ajax jquery分页插件_jquery ajax分页插件的简单实现
weixin_39539764的博客
02-16 110
说到基于jQuery的ajax分页插件，那我们就先看看主要的代码结构：1、首先定义一个pager对象：var sjPager = window.sjPager = {opts: {//默认属性pageSize: 10,preText: "pre",nextText: "next",firstText: "First",lastText: "Last",shiftingLeft: 3,shiftin...
jquery实现分页插件
飞奔的猫的专栏
03-19 387
做个记录备份下/** * Created by lgy on 2017/12/19. * page插件 */ (function ($) { $.fn.lgypage = function (options) { //初始化参数 var defaults = { totalpage:0, //总页数 ...
java jquery分页_Jquery分页
weixin_39615219的博客
02-21 90
Jquery分页:Page.jsp:第1页/共1页共0条记录每页5102030405070行 9 7 8 :$("#go").bind("click",function(){var pagecount=$("#pagecount").html();pagecount=parseInt(pagecount);if($("#gopage").val()==0){$("#gopage"...
jQuery实现的分页插件完整示例
10-15
本示例将详细介绍如何使用jQuery实现一个分页插件，并通过一个完整的实例来演示其功能。 首先，我们需要在HTML文件中引入jQuery库和自定义的CSS及JavaScript文件。在HTML的`<head>`部分，我们引入jQuery库以及分页...
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
10-17
jQuery分页插件j paginate是一款高效且易于使用的插件，专为实现网页的分页功能而设计。它提供了丰富的配置选项和简洁的调用方法，使得开发者能够快速地在项目中集成分页功能，提高用户体验。 首先，让我们了解如何...
jQuery Pagination分页插件_动力节点Java学院整理
12-11
jQuery Pagination是一款用于实现Ajax分页功能的插件，它能够帮助开发者轻松地在网页中添加动态分页效果，提升用户体验。这款插件一次性加载所有数据，因此在分页切换时无需刷新页面，提供了平滑的过渡体验。然而，...
纯jQuery实现前端分页功能
12-09
由于之前自己做过jquery分页，就是调用jni接口时，只能用前台分页解决显示问题。最近看到有人提这样的问题：一个请求传过来上万个数据怎么办？于是萌生了写这篇博客的想法。 效果展示： 因为核心代码主要在前端jquery，为了简便，后台就用servlet遍历本地磁盘目录文件的形式模拟响应的数据。 本项目的目录结构： 本项目的本地遍历文件夹结构： 处理显示请求的servlet: package com.cn.action; import com.alibaba.fastjson.JSON; import com.cn.entity.Downloadfile; import javax.se
jQuery实现分页功能（含ajax请求、后台数据、附完整demo）
10-20
主要给大家介绍了关于jQuery实现分页功能的相关资料，主要包含ajax请求和后台数据，文末给出了完整的demo示例，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
分页插件分页
11-08
jQuery分页插件,自带回调页数,jQuery分页插件,自带回调页数,jQuery分页插件,自带回调页数,
java ajax jquery分页插件_jquery+ajax实现分页功能
weixin_30300857的博客
02-23 209
wetCoder一个湿身的程序员，在编程的路上，一路爬行~由于最近在工作中遇到在springcloud的微服务中，一个web搜索页面需要用到列表翻页功能，本以为jquery的翻页在网上随便找一个就能用，但最后发现，要么功能不全，要么bug 比较多，最终要到了一篇文档，今天项目刚刚上线，所有抽时间整理一下分页插件的使用。(包括html、js、css、ajax、java 后台等代码)本人项目为spri...
java jquery分页查询,基于对jquery分页插件(jquery.pagination.js)的优化实现分页查询功能...
weixin_42137723的博客
03-13 180
开发中难免要碰到分页查询的功能实现. 这个功能个人是比较头疼, (1)虽然功能简单, 但实现的严谨还是比较费神的. (2)不能环境下, 一样的分页代码难以满足, 比如html中和jsp中就不一样. 同步请求和异步请求有不一样.对于一些用于jsp环境的分页套路, 个人不是很喜欢, 没办法, 钟爱前后端分离的套路. 于是想找一款基于js的实现的分页条功能. 无意中发现下面将要介绍的这款插件. 基本功...
java jquery分页_Jquery简单分页实现方法
weixin_29002209的博客
03-06 120
本文实例讲述了Jquery简单分页实现方法。分享给大家供大家参考。具体如下：js代码：function dolistpage(pagerow,pagenum,rowcount,pagecount){$("#pagemsg").html("每页显示"+pagerow+"条，当前" + pagenum + "/" +pagecount + "页共" +rowcount + "条");if (page...
java jquery 分页插件怎样实现_使用JQuery实现的分页插件分享
weixin_39604983的博客
02-24 85
一个简单的jQuery分页插件，兼容AMD规范和requireJS./*** jQuery分页插件* */;(function (factory) {if (typeof define === "function" && define.amd) {// AMD模式define([ "jquery" ], factory);} else {// 全局模式factory(jQuery)...
java 分页demo_[Java教程]jQuery实现的分页功能，包括ajax请求，后台数据，有完整demo...
weixin_42134144的博客
02-28 121
[Java教程]jQuery实现的分页功能，包括ajax请求，后台数据，有完整demo0 2016-03-08 14:00:11一：需求分析1)需要首页，末页功能2)有点击查看上一页，下一页功能3)页码到当前可视页码最后一页刷新页面二：功能实现思路也是分为三部分处理1)点击首页，末页直接显示第一页或者最后一页内容，当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图...
java jquery 分页插件怎样实现_基于jQuery的实现简单的分页控件
weixin_39881575的博客
03-04 117
1：效果图2：素材3：编码3.1思考需要做什么？1：分页控件需要向后台发送请求，发送的参数包括当前页，每页显示数量，查询条件；并且获取数据加载到当前页面；2：进行修改删除操作的时候能记住当前页；3：查询后翻页的时候可以可以记住当前查询的条件3.2实现HTMLjQuery为了我们的控件可以随意使用，我们将其写成插件的形式，首先搭个框架，我们将插件命名为simplePage(function($){$...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值