大佬教程收集整理的这篇文章主要介绍了jquery+json实现数据列表分页，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
该实例中，新闻数据列表未使用表格显示。下面将所有源码附上，其中用到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 @R_869_10586@l=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数据 @R_869_10586@l=data.@R_869_10586@l;//记录总数 $.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(@R_869_10586@l!=0){ //调用分页函数，将分页插件绑定到id为Pagination的div上 $("#Pagination").pagination(@R_869_10586@l,{ //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;"> <a style="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>
以上是大佬教程为你收集整理的jquery+json实现数据列表分页全部内容，希望文章能够帮你解决jquery+json实现数据列表分页所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。