jquery+json实现数据列表分页

来源：互联网发布：男士低腰牛仔裤知乎编辑：程序博客网时间：2024/06/02 23:23
该实例中，新闻数据列表未使用表格显示。下面将所有源码附上，其中用到jquery插件。
<%@ 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(0);});//点击分页时调用的函数，page_id为当前页的索引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, ////作用是防止在ajax成功调用之前就调用$("#Pagination").pagination,这个时候数据个数还没有初始化         dataType:"json",        data:"pageIndex="+(pageIndex+1),//传递页面索引        //发送请求前，显示加载动画                beforeSend:function(){$("#divload").show();$("#datas #Pagination").hide()},        //请求完毕后，隐藏加载动画        complete:function(){$("#divload").hide();$("#datas #Pagination").show()},        success:function(data){            var json=data.rows;//json数据            total=data.total;//记录总数            $.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></div><hr />";            });               $("#datas").html(temp); //将创建的新行附加在DIV中        }            });if(total!=0){         //调用分页函数，将分页插件绑定到id为Pagination的div上        $("#Pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数         callback: pageselectCallback,  //点击分页时，调用的回调函数        prev_text: '« 上一页',  //显示上一页按钮的文本        next_text: '下一页 »',  //显示下一页按钮的文本        items_per_page:10,  //每页显示的项数        num_display_entries:6,  //分页插件中间显示的按钮数目        current_page:pageIndex,  //当前页索引        num_edge_entries:2 //分页插件左右两边显示的按钮数目                });     }     }</script></head><body style=""><!-- start header --><div id="hen"><div style="color: #FFF;"><h1 style="font-size: 20px;">实时动态</h1></div><div style="text-align: right;"><astyle="color: #FFF; margin: 5px; text－decoration: none; cursor: pointer;"href="index.jsp">返回首页</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>