In this instance, the news data list is not displayed in a table. The following is an attachment of all source code, which uses the jquery plug-in.
Copy codeThe Code is as follows:
<% @ 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;
}
# Else {
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 loading the page
Bind (0 );
});
// The function called when the page is clicked. 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, // prevents calling $ ("# Pagination"). pagination before ajax is successfully called. The data count has not been initialized yet.
DataType: "json ",
Data: "pageIndex =" + (pageIndex + 1), // pass the page index
// Load the animation before sending the request
BeforeSend: function () {$ ("# divload"). show (); $ ("# datas # Pagination"). hide ()},
// Hide the animation after the request is completed
Complete: function () {$ ("# divload"). hide (); $ ("# datas # Pagination"). show ()},
Success: function (data ){
Var json = data. rows; // json data
Total = data. total; // 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:; text-indent: 2em; margin-top: 5px; '>" +
Item. summary + "}</div> });
$ ("# Datas" mirror.html (temp); // Add the new row to the DIV.
}
});
If (total! = 0 ){
// Call the paging function to bind the paging plug-in to the div with the id Pagination
$ ("# Pagination"). pagination (total, {// recordCount is a public variable defined in the background. Values are assigned by querying records from the database, and the total number of records is returned.
Callback: pageselectCallback, // callback function called when the page is clicked
Prev_text: '«Previous Page', // display the text of the previous page button
Next_text: 'Next page» ', // display the text of the next page button
Items_per_page: 10, // number of items displayed on each page
Num_display_entries: 6, // Number of buttons displayed in the center of the paging plug-in
Current_page: pageIndex, // index of the current page
Num_edge_entries: 2 // Number of buttons displayed on both sides of the page plug-in
});
}
}
</Script>
</Head>
<Body style = "">
<! -- Start header -->
<Div id = "external">
<Div style = "color: # FFF;">
<H1 style = "font-size: 20px;">
Real-time dynamic
</H1>
</Div>
<Div style = "text-align: right;">
<
Style = "color: # FFF; margin: 5px; text-decoration: none; cursor: pointer ;"
Href = "index. jsp"> back to homepage </a>
</Div>
</Div>
<Div class = "page">
<Div style = "margin: 10px 0;"> </div>
<Div id = "datas">
</Div>
<Div id = "divload" style = "text-align: center">
</Div>
<Div id = "Pagination" class = "digg"> </div>
</Div>
<Br/>
<Br/>
</Body>
</Html>