jquery json 分页

<%@ page language="java" contentType="text/html;charset=utf-8"%>

<%

String p = request.getContextPath();

String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+p+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>公告和待办事宜</title>

<style type="text/css">

 #content {   

    padding: 0;

    margin: 0;   

    border-collapse:collapse;

}

 

td {

    background: #fff;

    font-size:12px;

    width:270;

    padding: 6px 6px 6px 12px;

    color: #4f6b72;

}

 

td.alt {

    background: #F5FAFA;

    color: #797268;

}

A {text-decoration: NONE}

    DIV.yahoo2 {

    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 0.85em; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; FONT-FAMILY: Tahoma,Helvetica,sans-serif; TEXT-ALIGN: center

}

DIV.yahoo2 A {

    BORDER-RIGHT: #ccdbe4 1px solid; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ccdbe4 1px solid; PADDING-LEFT: 8px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccdbe4 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccdbe4 1px solid; TEXT-DECORATION: none

}

DIV.yahoo2 A:hover {

    BORDER-RIGHT: #2b55af 1px solid; BORDER-TOP: #2b55af 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #2b55af 1px solid; COLOR: #fff; BORDER-BOTTOM: #2b55af 1px solid; BACKGROUND-COLOR: #3666d4

}

DIV.yahoo2 A:active {

    BORDER-RIGHT: #2b55af 1px solid; BORDER-TOP: #2b55af 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #2b55af 1px solid; COLOR: #fff; BORDER-BOTTOM: #2b55af 1px solid; BACKGROUND-COLOR: #3666d4

}

DIV.yahoo2 SPAN.current {

    PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #000; MARGIN-RIGHT: 3px; PADDING-TOP: 2px

}

DIV.yahoo2 SPAN.disabled {

    DISPLAY: none

}

DIV.yahoo2 A.next {

    BORDER-RIGHT: #ccdbe4 2px solid; BORDER-TOP: #ccdbe4 2px solid; MARGIN: 0px 0px 0px 10px; BORDER-LEFT: #ccdbe4 2px solid; BORDER-BOTTOM: #ccdbe4 2px solid

}

DIV.yahoo2 A.next:hover {

    BORDER-RIGHT: #2b55af 2px solid; BORDER-TOP: #2b55af 2px solid; BORDER-LEFT: #2b55af 2px solid; BORDER-BOTTOM: #2b55af 2px solid

}

DIV.yahoo2 A.prev {

    BORDER-RIGHT: #ccdbe4 2px solid; BORDER-TOP: #ccdbe4 2px solid; MARGIN: 0px 10px 0px 0px; BORDER-LEFT: #ccdbe4 2px solid; BORDER-BOTTOM: #ccdbe4 2px solid

}

DIV.yahoo2 A.prev:hover {

    BORDER-RIGHT: #2b55af 2px solid; BORDER-TOP: #2b55af 2px solid; BORDER-LEFT: #2b55af 2px solid; BORDER-BOTTOM: #2b55af 2px solid

}

    

    </style>

<link rel="stylesheet" type="text/css" href="../css/main.css" />

<style type="text/css">

#module_list{margin-left:4px}

.modules{float:left; width:600px; height:270px; margin:10px; overflow:hidden; border:1px solid #acc6e9; background:#e8f5fe}

.m_title{height:24px; line-height:24px; background:#afc6e9}

#loader{height:24px; text-align:center}

.clear{clear:both}

</style>

<script type="text/javascript" src="<%=path %>js/jquery-1.5.min.js"></script>

<script type="text/javascript" src="<%=path %>js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript" src="<%=path %>js/idrag.js"></script>

<link href="<%=path %>css/thickbox.css" media="screen" rel="stylesheet" type="text/css" />

 

</head>

 

<body>

 

<div id="main">

  <div id="loader"></div>

  <div id="module_list">

   <input type="hidden" id="orderlist" value="11" />

   

    <div class="modules" title="未审核">

      <h3 class="m_title">未审核</h3>

<a id="audit" href="#TB_inline?height=200&width=200&inlineId=myOnPageContent" class="thickbox"></a>

   </div>

   

   <div class="modules" title="公告">

      <h3 class="m_title">公告</h3>

      <table id="content" >

 </table>

 <div id="pager" class="yahoo2"></div>

   </div>

   

   <div class="clear"></div>

  </div>

</div>

 

<div id="fade" class="black_overlay">

</div>

<div id="MyDiv" class="abc" style="width:30px;">

<div style="text-align: right; cursor: default; height: 40px;">

<span style="font-size: 16px;" onclick="CloseDiv()">关闭</span>

</div>

<div id="newsdata"></div>

</div>

</body>

<script type="text/javascript">

 queryNews();

 audit();

 function audit(){

 

  $.ajax({

              type: "Post",

              url: "<%=path %>releaseNewsAction!audit.action",

              contentType: "application/json; charset=utf-8",

              dataType: "text",

              success: function (data) {

 var audit = eval(data);

 var auditdata = "";

 if(audit[0].jmmjxz){

  auditdata = auditdata+'<a href="<%=path %>UtilAction!returnPage.action?returnUrl=webPage/sf_audit/audit_search.jsp?lxmc=居民面积新增-审核" >'+audit[0].jmmjxz +'</a>'+'<br/>';

  }

  if(audit[0].jmmjbg){

  auditdata = auditdata+'<a href="<%=path %>UtilAction!returnPage.action?returnUrl=webPage/sf_audit/audit_search.jsp?lxmc=居民面积变更-审核" >'+audit[0].jmmjbg +'</a>'+'<br/>';

  }

  if(audit[0].jmfytz){

  auditdata = auditdata+'<a href="<%=path %>UtilAction!returnPage.action?returnUrl=webPage/sf_audit/audit_search.jsp?lxmc=居民费用调整-审核"  >'+ audit[0].jmfytz+'</a>'+'<br/>';

  }

  if(audit[0].jmfyhj){

  auditdata = auditdata+'<a href="<%=path %>UtilAction!returnPage.action?returnUrl=webPage/sf_audit/audit_search.jsp?lxmc=居民费用核减-审核"  >'+ audit[0].jmfytz+'</a>'+'<br/>';

  }

  if(audit[0].jmtg){

  auditdata = auditdata+'<a href="<%=path %>UtilAction!returnPage.action?returnUrl=webPage/sf_audit/audit_search.jsp?lxmc=居民停供-审核"  >'+ audit[0].jmtg+'</a>'+'<br/>';

  }

  if(audit[0].jmcw){

  auditdata = auditdata+'<a href="<%=path %>UtilAction!returnPage.action?returnUrl=webPage/sf_audit/audit_search.jsp?lxmc=居民拆网-审核"  >'+audit[0].jmcw+'</a>'+'<br/>';

  }

  if(audit[0].jmcwhf){

  auditdata = auditdata+'<a href="<%=path %>UtilAction!returnPage.action?returnUrl=webPage/sf_audit/audit_search.jsp?lxmc=居民拆网恢复-审核"  >'+ audit[0].jmcwhf+'</a>'+'<br/>';

  }

               

               $("#audit").html(auditdata);

              },

              error: function (err) {

                      alert("错误");

              }

        });

 

 }

 

 function queryNews(){ 

  $(function () {

 

            $.post("<%=path %>releaseNewsAction!nuewList.action", null, function (data) {

var count = eval(data);

                var total = count[0].total;

                

                PageClick(1, total, 3);

            });

 

            PageClick = function (pageIndex, total, spanInterval) {

                $.ajax({

                    url: "<%=path %>releaseNewsAction!nuewList.action",

                    data: { "PageIndex": pageIndex },

                    type: "post",

                    dataType: "json",

                    success: function (data) {

 

                        //索引从1开始

                        //将当前页索引转为int类型

                        var intPageIndex = parseInt(pageIndex);

 

                        //获取显示数据的表格

                        var table = $("#content");

                        //清楚表格中内容

                        $("#content tr").remove();

 

                        //向表格中添加内容

                        for (var i = 0; i < data.length; i++) {

                            table.append(

                                $("<tr onclick='ShowDiv("+data[i].nr+")' ><td>" +

                                data[i].mc

                                + "</td><td>" +

                                data[i].kssj

                                + "</td><td>" +

                                data[i].zt

                                + "</td><td>" +

                                data[i].nr

                                + "</td></tr>")

                                );

                        } //for

 

                        //创建分页

                        //将总记录数结果 得到 总页码数

                        var pageS = total

                        if (pageS % 10 == 0) pageS = pageS / 10;

                        else pageS = parseInt(total / 10) + 1;

                        var $pager = $("#pager");

 

                        //清楚分页div中的内容

                        $("#pager span").remove();

                        $("#pager a").remove();

 

                        //添加第一页

                        if (intPageIndex == 1)

                            $pager.append("<span class='disabled'>第一页</span>");

                        else {

                            var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () {

                                PageClick($(this).attr('first'), total, spanInterval);

                                return false;

                            });

                            $pager.append(first);

                        }

 

 

                        //添加上一页

                        if (intPageIndex == 1)

                            $pager.append("<span class='disabled'>上一页</span>");

                        else {

                            var pre = $("<a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'>上一页</a>").click(function () {

                                PageClick($(this).attr('pre'), total, spanInterval);

                                return false;

                            });

                            $pager.append(pre);

                        }

 

                        //设置分页的格式  这里可以根据需求完成自己想要的结果

                        var interval = parseInt(spanInterval); //设置间隔

                        var start = Math.max(1, intPageIndex - interval); //设置起始页

                        var end = Math.min(intPageIndex + interval, pageS)//设置末页

 

                        if (intPageIndex < interval + 1) {

                            end = (2 * interval + 1) > pageS ? pageS : (2 * interval + 1);

                        }

 

                        if ((intPageIndex + interval) > pageS) {

                            start = (pageS - 2 * interval) < 1 ? 1 : (pageS - 2 * interval);

 

                        }

 

 

                        //生成页码

                        for (var j = start; j < end + 1; j++) {

                            if (j == intPageIndex) {

                                var spanSelectd = $("<span class='current'>" + j + "</span>");

                                $pager.append(spanSelectd);

                            } //if 

                            else {

                                var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () {

                                    PageClick($(this).text(), total, spanInterval);

                                    return false;

                                });

                                $pager.append(a);

                            } //else

                        } //for

 

                        //上一页

                        if (intPageIndex == total) {

                            $pager.append("<span class='disabled'>下一页</span>");

 

                        }

                        else {

 

                            var next = $("<a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'>下一页</a>").click(function () {

                                PageClick($(this).attr("next"), total, spanInterval);

                                return false;

                            });

                            $pager.append(next);

                        }

 

                        //最后一页

                        if (intPageIndex == pageS) {

                            $pager.append("<span class='disabled'>最后一页</span>");

 

                        }

                        else {

                            var last = $("<a href='javascript:void(0)' last='" + pageS + "'>最后一页</a>").click(function () {

                                PageClick($(this).attr("last"), total, spanInterval);

                                return false;

                            });

                            $pager.append(last);

                        }

 

                    } //sucess

 

                }); //ajax

 

            }; //function

 

        });   //ready

 

   } 

function ShowDiv(nr){

 

document.getElementById("MyDiv").style.display='block';

document.getElementById("fade").style.display='block' ;

var bgdiv = document.getElementById("MyDiv");

bgdiv.style.width = document.body.scrollWidth - 200;

$("#"+"fade").height($(document).height());

$("#newsdata").html(nr);

};

//关闭弹出层

function CloseDiv(show_div,bg_div)

{

document.getElementById("MyDiv").style.display='none';

document.getElementById("fade").style.display='none';

}

  

</script>

</html>

你可能感兴趣的:(jquery)