Jquery分页-simple-pagination

Jquery分页-simple-pagination

 

分页按钮样式

"light-theme" 

 

"dark-theme"

 

"compact-theme"

 

下载地址

http://www.arungudelli.com/jquery/simple-pagination-using-jquery/

 

使用步骤

Step 1: 添加js和css

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
 
<!-- JS -->
<script type="text/javascript" src="plug/simplePagination/tests/lib/jquery.min.js"></script>
<script type="text/javascript" src="plug/simplePagination/jquery.simplePagination.js"></script>
 
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="plug/simplePagination/simplePagination.css"/>

Step 2: 添加js代码

$(function(){
 	$("#paging2").pagination({
        	 items: 100,
       	 itemsOnPage: 10,
       	 cssStyle: 'dark-theme'
    	});
});

 

Step 3: 添加样式

<style type="text/css">
a{text-decoration:none}
.page{margin:30px auto;width:620px}
</style>

Step 4: 添加div

 <!--分页div-->
<div id="paging2" class="page"></div>

 

具体使用示例：

导入js和样式：

 

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
 
<!-- JS -->
<script type="text/javascript" src="plug/simplePagination/tests/lib/jquery.min.js"></script>
<script type="text/javascript" src="plug/simplePagination/jquery.simplePagination.js"></script>
 
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="plug/simplePagination/simplePagination.css"/>
 

样式：

<style type="text/css">
* {font-size: 13px;}
a{text-decoration:none}
.page{margin:30px auto;width:620px}
</style>

Js：

 

$(function(){
 	queryList(1,10);
});
function queryList(currentPage,pageSize ){
$.ajax({
     type: "post",
     url: "XXXXX.do",  
     dataType: "json", 
     data:{currentPage:currentPage,pageSize:pageSize},//参数  
     async:false,
     success: function(data){
var data_su = data.rows;
    	 $("#paging2").pagination({
        	 	items: data.count,
       	 	itemsOnPage: pageSize,
       	 	cssStyle: 'dark-theme',
       	 	currentPage:currentPage,
       	 	prevText:'上一页',
       	 	nextText:'下一页',
       	 	onPageClick : function(pageNumber,event){
       	 
           	queryList(pageNumber,pageSize )
         	 	}
    	 });
    	 $('#tab_table').html("");
    	 $('#tab_table').append("<tr height=\"30px\" align=\"center\" class=\"tbTitle\"><th>用户名</th><th>注册时间</th><th>最后登陆时间</th><th>邮箱</th><th>操作</th></tr>");
    	 if(data.count == 0){
 	$('#tab_table').append("<tr height=\"30px\" align=\"center\" class=\"tbContext\"><td colspan=\"5\"><nobr>没有对应的信息... 请选择其他筛选条件。</nobr></td></tr>");
 }else{
  	for(var i=0;i<data_su.length;i++){
// 遍历用户
    	  	 	$('#tab_table').append("<tr height=\"30px\" align=\"center\" class=\"tbContext\"><td><nobr>"+data_su[i].userName+"</nobr></td><td><nobr>"+data_su[i].regTime+"</nobr></td><td><nobr>"+data_su[i].lastLogin+"</nobr></td><td><nobr>"+data_su[i].mailAddress+"</nobr></td><td><nobr><a href=\"#\" onclick=\"query_user_login_chart("+year+",'"+data_su[i].userName+"')\">登录记录</a></nobr></td></tr>");
 	}
 }
}
 });
}

Html：

<!-- 数据div -->
       	<div id="tab">
       	<div id="Main">
       	<table id="tab_table" width="100%" border="1" cellpadding="0" cellspacing="0" ></table>
       	<!--分页div-->
<div id="paging2" class="page"></div>
       	</div>
       	</div>