Of Stack

Jquery +json implementation data list pagination sample code

  • 2020-03-29 23:49:45
  • OfStack
In this instance, the list of news data is not displayed in a table. The following is all the source code attached, which USES jquery plug-in.
 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<c:set var="ctx" value="${pageContext.request.contextPath}" /> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Demo</title> 

<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script> 

<script type="text/javascript" src="js/jquery.pagination.js"></script> 

<link rel="stylesheet" href="js/pagination.css" type="text/css"></link> 
<style type="text/css"> 
body { 
width: 100%; 
height: 100%; 
margin: 0 auto; 
padding: 0; 
background-color: #FFF; 
} 

#hen { 
background-color: #000; 
height: 50px; 
margin: 0px; 
padding: 12px 20px 2px 20px; 
border: #CCC double 1px; 
} 

.page { 
width: 1024px; 
margin: 20px auto; 
padding: 0; 
} 

#fm { 
margin: 0; 
padding: 10px 30px; 
} 

.ftitle { 
font-size: 14px; 
font-weight: bold; 
color: #666; 
padding: 5px 0; 
margin-bottom: 10px; 
border-bottom: 1px solid #ccc; 
} 

.fitem { 
margin-bottom: 5px; 
} 

.fitem label { 
display: inline-block; 
width: 80px; 
} 

A { 
text-decoration: none; 
} 

A:link { 
text - decoration: none; 
color: #000; 
} 

A:visited { 
color: #000; 
text - decoration: none 
} 

A:active { 
color: #000;; 
text - decoration: none 
} 

A:hover { 
text - decoration: none; 
color: red; 
} 

.d_over { 
background-color: #EFEFEF; 
} 

.d_out { 
background-color: #FFFFFF; 
} 
</style> 

<script type="text/javascript"> 
$(function(){//Bind when the page loads

bind(0); 
}); 

//Click on the function called when paging, and the page_id is the index of the current page
function pageselectCallback(page_id, jq) { 
bind(page_id); 
} 

function bind(pageIndex) 
{ 
var temp=""; 
var total=0; 
$.ajax({ 
type:"GET", 
url:"sys/news.do?method=findByTopic&page="+(pageIndex+1), 
async:false, ////This prevents $("#Pagination"). Pagination from being called before the successful ajax call, when the number of data is not initialized
dataType:"json", 
data:"pageIndex="+(pageIndex+1),//Pass page index
//Before sending the request, the load animation is displayed
beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()}, 
//After the request completes, hide the load animation
complete:function(){$("#divload").hide();$("#datas #Pagination").show()}, 
success:function(data){ 
var json=data.rows;//The json data
total=data.total;//The total number of records
$.each(json,function(index,item){ 
temp+="<div id='datas' classdivclass="d_out" onmouseover="this.className='d_over'" "+ 
"onmouseout="this.className='d_out'" style='padding: 10px 15px 12px 15px;'>"+ 
"<strong> <a style='font-size: 20px;' href='"+item.URL+"' target='_blank'>"+ 
item.title+"</a></strong>"+ 
"<div style='font-size: 14px; font-famliy:  Song typeface ; text-indent: 2em; margin-top: 5px;'>"+ 
item.summary+" }</div></div><hr />"; 
}); 
$("#datas").html(temp); //Appends the new line created to a DIV
} 

}); 

if(total!=0){ 
//The paging function is called to bind the paging plug-in to the div with the Pagination id
$("#Pagination").pagination(total, { //RecordCount is a public variable defined in the background that returns the total number of records by an assignment from a database query
callback: pageselectCallback, //The callback function called when paging is clicked
prev_text: '«  The previous page ', //Displays the text of the previous button
next_text: ' The next page  »', //Displays the text of the next page button
items_per_page:10, //Number of items per page
num_display_entries:6, //The number of buttons shown in the middle of the paging plug-in
current_page:pageIndex, //Current page index
num_edge_entries:2 //The number of buttons displayed on the left and right sides of the paging plug-in

}); 
} 

} 
</script> 
</head> 
<body style=""> 
<!-- start header --> 
<div id="hen"> 
<div style="color: #FFF;"> 
<h1 style="font-size: 20px;"> 
 Real-time dynamic  
</h1> 
</div> 
<div style="text-align: right;"> 
<a 
style="color: #FFF; margin: 5px; text - decoration: none; cursor: pointer;" 
href="index.jsp"> Return to the home page </a> 
</div> 
</div> 
<div class="page"> 
<div style="margin: 10px 0;"></div> 
<div id="datas"> 
</div> 
<div id="divload" style="text-align: center"> 
<img src="images/wait.gif" /> 
</div> 
<div id="Pagination" class="digg"></div> 
</div> 
<br /> 
<br /> 
</body> 
</html>
Related articles: