`
knight_black_bob
  • 浏览: 858500 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jBootstrapPage分页

    博客分类:
  • js
阅读更多

 



 

 

<%@ 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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(右上角的爱心标志,支持支付宝和PayPal捐助),没钱捧个人场,谢谢各位。



 
 
 谢谢您的赞助,我会做的更好!

 

 

 

  • 大小: 14 KB
3
1
分享到:
评论

相关推荐

    jBootstrapPage

    **jBootstrapPage.js 分页插件详解** 在网页开发中,数据展示往往涉及到大量的记录,为了提高用户体验,分页功能成为必不可少的一部分。jBootstrapPage.js 是一个基于 jQuery 的轻量级分页插件,它充分利用了 ...

    超强php分页打包 通用分页 万能分页 ajax分页 google分页

    本压缩包“超强php分页打包 通用分页 万能分页 ajax分页 google分页”提供了一系列的分页解决方案,包括了基本的PHP分页、通用的分页实现、以及结合AJAX技术的动态分页,旨在满足各种项目需求。下面将详细介绍这些...

    用recyclerview实现分页滑动,横向纵向分页

    本教程将深入讲解如何利用RecyclerView实现横向和纵向的分页滑动,充分利用Android原生功能。 首先,理解RecyclerView的基本结构。RecyclerView包含一个Adapter,它负责将数据集绑定到视图上,以及一个...

    Java Ajax分页,jsp ajax分页

    在网页开发中,分页是一种常见的用户界面设计,用于处理大量数据时的高效展示。Java AJAX(Asynchronous JavaScript and XML)分页与JSP(JavaServer Pages)相结合,可以提供无需刷新整个页面即可动态加载更多内容...

    分页插件.zip

    在网页开发中,分页是不可或缺的一个功能,特别是在数据量庞大的时候,为了提高用户体验,将大量数据分成多个页面展示,而不是一次性加载所有内容。本文将详细介绍一个基于jQuery的分页插件,它具有代码简洁、兼容性...

    js分页示例,前台分页,客户端分页,分页机制,js分页

    本篇将深入探讨JavaScript实现分页的相关知识点,包括前台分页、客户端分页、分页机制以及相关的JavaScript代码示例。 首先,我们要理解什么是分页。在Web应用中,分页是将大量数据分成多个小部分(每部分通常称为...

    WPF 分页DataGrid 分页控件的实现

    在Windows Presentation Foundation (WPF) 中,开发人员经常需要处理大量的数据展示,此时分页功能就显得尤为重要。WPF DataGrid 控件是一个强大的表格展示工具,它可以方便地展示和操作数据,而添加分页功能则可以...

    java实现分页 jsp分页 分页

    java实现分页 jsp分页 分页java实现分页 jsp分页 分页java实现分页 jsp分页 分页java实现分页 jsp分页 分页java实现分页 jsp分页 分页java实现分页 jsp分页 分页

    分页代码 分页代码 分页代码

    分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码...

    QTableWidget,QTableView分页的分页栏

    为了解决这个问题,我们可以实现分页功能,让数据分批次加载,从而提高界面响应速度。本文将深入探讨如何在`QTableWidget`和`QTableView`中实现分页栏。 首先,我们需要理解`QTableWidget`和`QTableView`的区别。`...

    mysql数据库实现分页

    在MySQL数据库中,分页是处理大量数据查询时不可或缺的一种技术。它允许用户按需加载数据,而不是一次性获取所有记录,从而提高了用户体验并降低了服务器负载。以下是对分页实现的详细说明: 一、基础概念 分页是将...

    asp分页,asp分页仿百度,asp分页大全

    在ASP中实现分页功能是常见的需求,特别是在处理大量数据列表时,分页能够提高用户体验,避免一次性加载过多内容导致页面加载缓慢。下面将详细探讨ASP分页的相关知识点。 一、分页的基本原理 分页主要是通过计算总...

    jquery分页,最简单分页,完整分页案例,50种分页样式

    **jQuery分页插件及其应用** 在Web开发中,数据量较大的时候,为了提高用户体验,通常会采用分页的方式来展示信息。jQuery分页插件因其轻量级、易用性而受到开发者们的广泛喜爱。本资源包含“最简单分页”至“50种...

    分页:高度自定义分页

    2.1.目前网络上很多分页主键,不能进行按钮选择, 2.2.甚至对样式修改的难度也较大, 2.3.使用在开发过程中由于使用到了分页功能,在这里写了一个分页功能。 3.按钮选择 之前的很多按钮是通过参数进行选择,这样不...

    各数据库分页语法支持

    ### 各数据库分页语法支持 #### 概述 在数据库操作中,分页查询是一项非常常见的需求。分页能够帮助我们有效地管理大量的数据记录,提高数据查询的效率和用户体验。不同的数据库系统提供了不同的分页机制,本文将...

    java_swing表格分页

    Java Swing 表格分页实现 Java Swing 是一个用于构建图形用户界面的 Java 库,提供了丰富的用户界面组件和功能。在本文中,我们将探讨如何使用 Java Swing 实现表格分页。 表格分页的需求 在实际开发中,我们经常...

    java分页标签自定义分页标签自定义分页标签

    自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签自定义分页标签...

    C# winform分页控件,用于dataGridView分页浏览,分页,跳转,自定义页数,动态设置页大小

    C# winform分页控件,用于dataGridView分页浏览 `PageControl`是一个为Windows Forms应用程序提供的自定义用户控件,用于实现数据分页显示功能。该控件允许用户通过简单的界面导航不同的数据页,包括首页、上一页、...

    关于Mysql分页的两种方法,假分页和limit分页

    在MySQL数据库中,分页是实现大量数据查询时不可或缺的功能,它可以帮助用户按需加载数据,提高网页加载速度,减少服务器资源消耗。本篇文章将详细探讨两种常见的分页方法:假分页和LIMIT分页。 首先,我们来理解...

    java 通用分页 java 通用分页

    Java 通用分页详解 Java 通用分页是指在Java编程中对大量数据进行分页处理,以提高系统效率和性能。下面对Java通用分页的知识点进行详细说明: 1. 分页的必要性 在实际项目中,数据量可能非常大,直接查询所有...

Global site tag (gtag.js) - Google Analytics