jBootstrapPage分页

最新推荐文章于 2019-02-21 16:20:39 发布

curiousby

最新推荐文章于 2019-02-21 16:20:39 发布

阅读量148

点赞数

分类专栏： js 文章标签： jBootstrapPage 分页

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用JQuery和jBootstrapPage插件实现的栏目列表页面，该页面能够动态加载文章列表，并支持分页和调整每页显示的文章数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=9" />
<link href="../css/comm.css" rel="stylesheet" type="text/css" />
<link href="../css/jBootsrapPage.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/comm/comm.js"></script>
<script type="text/javascript" src="../js/jBootstrapPage/jBootstrapPage.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../image/bitbug_favicon.ico" />
<style>
html { overflow-x: hidden;}
</style>
<script type='text/javascript'>
$(function(){
	$.selfReturnTop('returnTOP','.articleMain');
	var a =  "${session_user}";
	if(a==''){
		var documentWidth = $(document).width();
		$('.header').css({
			width:documentWidth,
		});
		$('body').css('background','#FFF');
	};
});

function write(pageSize,total,pageIndex){ 
   var url = "<%=request.getContextPath()%>/user/getArticleTableInfo.action?limit=" + pageSize + "&offset=" +pageIndex; 
	$.ajax({
	    cache: true,
	    type: "post",
	    url:url, 
	    dataType: "json",
	    
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) {  
	    	var sum = data.total;
	    	var jsonList= data.rows ; 
	    	var htmlContent='';
			for(var i=0;i<jsonList.length;i++){
				
				if (jsonList[i].hasImage >0) {  
					htmlContent +='<div class="articleBox">'+
					'<h2>'+
						'<span>【'+ jsonList[i].category+'】</span>'+
						'<b>'+ jsonList[i].articleTitle+'</b>'+
						'<font>发布时间：'+ jsonList[i].insertTime+'</font>'+
					'</h2>'+
					'<div class="hasImg">'+
						'<div class="articleImg"> <img src="a.png"> </div>'+
						 jsonList[i].articleContent+' <a href="<%=request.getContextPath()%>/user/getArticleDetail.action?articleId='+jsonList[i].articleId +'"> 查看全文 ></a>'+
					'</div>'+
					'<h3>'+
						'<span>来源：'+ jsonList[i].source+'</span>'+
						'<span>浏览量：'+ jsonList[i].count+'次</span>'+
					'</h3>'+
				'</div>'; 
				}else{ 
					htmlContent +='<div class="articleBox">'+
					'<h2>'+
						'<span>【'+ jsonList[i].category+'】</span>'+
						'<b>'+ jsonList[i].articleTitle+'</b>'+
						'<font>发布时间：'+ jsonList[i].insertTime+'</font>'+
					'</h2>'+
					'<div>'+
					   jsonList[i].articleContent+'<a href="<%=request.getContextPath()%>/user/getArticleDetail.action?articleId='+jsonList[i].articleId +'"> 查看全文 ></a>'+
					'</div>'+
					'<h3>'+
						'<span>来源：'+ jsonList[i].source+'</span>'+
						'<span>浏览量：'+ jsonList[i].count+'次</span>'+
					'</h3>'+
				'</div> '; 
				}
			}  
		$('.articleMain').html(htmlContent); 
	    }
	});    
}


$(function(){
	var size=0; 
	
		$.ajax({
	    cache: true,
	    type: "POST",
	    url:'<%=request.getContextPath()%>/user/getArticleCount.action', 
	    dataType: "json",
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) { 
	     size = data.total;  
	    }
	});  
	var bottonsize= size /5 +1;	
		
    createPage(5, bottonsize, size);
	//
	$('a[page="1"]').click();
	
    function createPage(pageSize, buttons, total) {
        $(".pagination").jBootstrapPage({
            pageSize : pageSize,
            total : total,
            maxPageButton:buttons,
            onPageClicked: function(obj, pageIndex) {
            	write(pageSize,total,pageIndex);
            }
        });
    }

    
    
    
    $('.btn1').click(function(){
    	var size=0; 
    	
		$.ajax({
	    cache: true,
	    type: "POST",
	    url:'<%=request.getContextPath()%>/user/getArticleCount.action', 
	    dataType: "json",
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) { 
	     size = data.total;  
	    }
	});  
	var bottonsize= size /5 +1;	
		
    createPage(5, bottonsize, size); 
		$('a[page="1"]').click();
    });

    $('.btn2').click(function(){
var size=0; 
    	
		$.ajax({
	    cache: true,
	    type: "POST",
	    url:'<%=request.getContextPath()%>/user/getArticleCount.action', 
	    dataType: "json",
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) { 
	     size = data.total;  
	    }
	});  
	var bottonsize= size /5 +1;	
		
    createPage(10, bottonsize, size); 
		$('a[page="1"]').click();
    });

    $('.btn3').click(function(){
var size=0; 
    	
		$.ajax({
	    cache: true,
	    type: "POST",
	    url:'<%=request.getContextPath()%>/user/getArticleCount.action', 
	    dataType: "json",
	    async: false,
	    error: function(data) {
	    },
	    success: function(data) { 
	     size = data.total;  
	    }
	});  
	var bottonsize= size /5 +1;	
		
    createPage(15, bottonsize, size); 
		$('a[page="1"]').click();
    });
       
});
</script>
<title>栏目列表页</title>
</head>
<body>
	<%@ include file="../common/header_long.jsp"%>
	<div style='width:1200px; background:#FFF; margin:0 auto;'>		
		<div class='articleMain'>
			<!-- 文章区 -->
			
			<!-- 图片样式 
				
			-->
			
		</div>
		<div class='articleBtn'>
			<div class='articleBtnBox'>共300条记录，每页显示<font>5<i></i></font>条
				<ol class='articleBtnOl' style='display:none;'>
					<li class='btn1'>5</li>
					<li class='btn2'>10</li>
					<li class='btn3'>15</li>
				</ol>
			</div>
			<ul class="pagination"></ul>
			<div class='clearBoth'></div>
		</div>
	</div>
	<%@ include file="../common/foot_long.jsp"%>
</body>
</html>