在該實例中，新聞資料清單未使用表格顯示。下面將所有原始碼附上，其中用到jquery插件。 複製程式碼 程式碼如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> Demo <br>body { <br>width: 100%; <br>height: 100%; <br>margin: 0 auto; <br>padding: 0; <br>background-color: #FFF; <br>} <br><br>#hen { <br>background-color: #000; <br>height: 50px; <br>margin: 0px; <br>padding: 12px 20px 2px 20px; <br>border: #CCC double 1px; <br>} <br><br>.page { <br>width: 1024px; <br>margin: 20px auto; <br>padding: 0; <br>} <br><br>#fm { <br>margin: 0; <br>padding: 10px 30px; <br>} <br><br>.ftitle { <br>font-size: 14px; <br>font-weight: bold; <br>color: #666; <br>padding: 5px 0; <br>margin-bottom: 10px; <br>border-bottom: 1px solid #ccc; <br>} <br><br>.fitem { <br>margin-bottom: 5px; <br>} <br><br>.fitem label { <br>display: inline-block; <br>width: 80px; <br>} <br><br>A { <br>text-decoration: none; <br>} <br><br>A:link { <br>text－decoration: none; <br>color: #000; <br>} <br><br>A:visited { <br>color: #000; <br>text－decoration: none <br>} <br><br>A:active { <br>color: #000;; <br>text－decoration: none <br>} <br><br>A:hover { <br>text－decoration: none; <br>color: red; <br>} <br><br>.d_over { <br>background-color: #EFEFEF; <br>} <br><br>.d_out { <br>background-color: #FFFFFF; <br>} <br> <br>$(function(){//页面加载时，进行绑定 <br><br>bind(0); <br>}); <br><br>//点击分页时调用的函数，page_id为当前页的索引 <br>function pageselectCallback(page_id, jq) { <br>bind(page_id); <br>} <br><br>function bind(pageIndex) <br>{ <br>var temp=""; <br>var total=0; <br>$.ajax({ <br>type:"GET", <br>url:"sys/news.do?method=findByTopic&page="+(pageIndex+1), <br>async:false, ////作用是防止在ajax成功调用之前就调用$("#Pagination").pagination,这个时候数据个数还没有初始化 <br>dataType:"json", <br>data:"pageIndex="+(pageIndex+1),//传递页面索引 <br>//发送请求前，显示加载动画 <br>beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()}, <br>//请求完毕后，隐藏加载动画 <br>complete:function(){$("#divload").hide();$("#datas #Pagination").show()}, <br>success:function(data){ <br>var json=data.rows;//json数据 <br>total=data.total;//记录总数 <br>$.each(json,function(index,item){ <br>temp+="<div id='datas' classdivclass=\"d_out\" onmouseover=\"this.className='d_over'\" "+ <BR>"onmouseout=\"this.className='d_out'\" style='padding: 10px 15px 12px 15px;'>"+ <br>"<strong> <a style='font-size: 20px;' href='"+item.URL+"' target='_blank'>"+ <br>item.title+"</a></strong>"+ <br>"<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+ <br>item.summary+" }</div></div><hr />"; <br>}); <br>$("#datas").html(temp); //将创建的新行附加在DIV中 <br>} <br><br>}); <br><br>if(total!=0){ <br>//调用分页函数，将分页插件绑定到id为Pagination的div上 <br>$("#Pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数 <br>callback: pageselectCallback, //点击分页时，调用的回调函数 <br>prev_text: '« 上一页', //显示上一页按钮的文本 <br>next_text: '下一页 »', //显示下一页按钮的文本 <br>items_per_page:10, //每页显示的项数 <br>num_display_entries:6, //分页插件中间显示的按钮数目 <br>current_page:pageIndex, //当前页索引 <br>num_edge_entries:2 //分页插件左右两边显示的按钮数目 <br><br>}); <br>} <br><br>} <br> 实时动态 style="color: #FFF; margin: 5px; text－decoration: none; cursor: pointer;" href="index.jsp">返回首页 > > 身材>
