优秀的编程知识分享平台

网站首页 > 技术文章 正文

JQ实现简单的分页功能（jqprint分页打印）

nanyue 2024-09-11 05:25:52 技术文章 3 ℃

直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>分页功能</title>

<script src="js/jquery-1.11.0.js"></script>

<style>

*{margin:0;padding:0}

#paging{

width:100%;

height:auto;

margin-top:100px;

}

/* 内容样式 */

#paging .paging-content{

width:100%;

height:auto;

text-align: center;

}

#paging .paging-content .paging-content-text{

width:100%;

height:50px;

line-height:50px;

}

/*分页样式*/

#paging .paging-footer{

width:100%;

height:50px;

line-height:50px;

font-size:20px;

color:#fff;

background-color:#d3d3d3;

}

#paging .paging-footer .paging-footer-content{

text-align:center;

margin:auto;

}

#paging .paging-footer-content .content-text{

display:inline-block;

margin-right:15px;

}

#paging .paging-footer-content .content-text button{

color:#fff;

font-size:20px;

background-color: #d3d3d3;

outline: none;

border:none;

cursor:pointer;

}

#paging .paging-footer-content .content-text button:hover{

color:#2d8cf0;

}

#paging .paging-footer-content .content-text .upward{

cursor:no-drop;

}

#paging .paging-footer-content .content-text span{

color:#d3d3d3;

font-size:16px;

background-color:#fff;

border-radius:8px;

padding:1px 15px;

margin:0 10px;

}

#paging .paging-footer-content .content-text input{

width:30px;

font-size:16px;

background-color:#fff;

border-radius:8px;

padding:1px 15px;

margin:0 10px;

outline: none;

border:none;

}

</style>

</head>

<body>

<div id="paging">

<div class="paging-content">

</div>

<div class="paging-footer">

<div class="paging-footer-content">

<div class="content-text">

<button class="upward" disabled="disabled">上一页</button>

</div>

<div class="content-text">

第<span class="nowPage">1</span>页

</div>

<div class="content-text">

<button class="down">下一页</button>

</div>

<div class="content-text">

跳转<input class="pageVal" type="text" value="1" onKeyUp="value=value.replace(/\D/g,'')"/>页

</div>

</div>

</div>

</div>

<script type="text/javascript">

$(function(){

//页面加载初始化数据

var page = 1; //请求页数

var pageSize = 10; //每页返回数据条数

getData();

function getData(){

$.ajax({

type : 'GET',

url : 'datas.json',

data : {

page : page,

pageSize : pageSize

},

dataType: "json",

success: function(data){

//var res = data.data;

console.log(data);

$('#paging .paging-content').html(''); //每次请求清空原来的数据

$.each(res,function(index,res){

pagingContent =

'<div class="paging-content-text">'+res.bumenname+'</div>'

//将请求的数据append到页面上

$('#paging .paging-content').append(pagingContent);

})

}

});

}

//分页

var upwardPage = $(' #paging .content-text .upward'); //上一页

var downPage = $(' #paging .content-text .down'); //下一页

var nowPage = $(' #paging .content-text .nowPage'); //当前页数

var nowPageNum = Number(nowPage.html());

var pageVal = $(' #paging .content-text .pageVal'); //跳转页数

//上一页

upwardPage.click(function(){

nowPageNum = page;

if(nowPageNum > 1){

nowPageNum --;

}else{

nowPageNum == 1;

}

if(nowPageNum == 1){

upwardPage.attr('disabled',true);

upwardPage.css('cursor','no-drop');

nowPage.html(1);

pageVal.val(1);

page = nowPageNum;

getData();

}

else{

nowPage.html(nowPageNum);

pageVal.val(nowPageNum);

page = nowPageNum;

getData();

}

})

//下一页

downPage.click(function(){

nowPageNum = page;

upwardPage.attr('disabled',false);

upwardPage.css('cursor','pointer');

nowPageNum++;

nowPage.html(nowPageNum);

pageVal.val(nowPageNum);

page = nowPageNum;

getData();

})

//跳转

//失去焦点

pageVal.blur(function(){

var pageval = Number(pageVal.val());

var nowpage = Number(nowPage.html());

//如果失去焦点前后的值一样，不进行数据请求

if(pageval != nowpage){

//小于1跳转第一页

if(pageval > 1){

upwardPage.attr('disabled',false);

upwardPage.css('cursor','pointer');

nowPage.html(pageval);

page = pageval;

getData();

}else{

upwardPage.attr('disabled',true);

upwardPage.css('cursor','no-drop');

nowPage.html(1);

pageVal.val(1);

page = 1;

getData();

}

}

})

//回车

pageVal.keyup(function(event){

if(event.keyCode == 13){

var pageval = Number(pageVal.val());

var nowpage = Number(nowPage.html());

//如果失去焦点前后的值一样，不进行数据请求

if(pageval != nowpage){

//小于1跳转第一页

if(pageval > 1){

upwardPage.attr('disabled',false);

upwardPage.css('cursor','pointer');

nowPage.html(pageval);

page = pageval;

getData();

}else{

upwardPage.attr('disabled',true);

upwardPage.css('cursor','no-drop');

nowPage.html(1);

pageVal.val(1);

page = 1;

getData();

}

}

}

})

})

</script>

</body>

</html>

效果图：（内容倒是后换个地址就可以显示）

水平有限，欢迎指教。

Tags：

猜你喜欢

最近发表
标签列表