每日总结-23.10.12

<%@ page import="zhengcechaxun.Pd_zhengce" %>
<%@ page import="zhengcechaxun.Thesql" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"

         pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="utf-8" />
    <title>科技政策查询系统</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        .cloudTableAuto{
            width:1200px;
            margin:20px auto;
        }
        .cloudTable{
            border: 1px solid #e0e6ed;
            font-size: 16px;
            width:100%;
        }
        .cloudTableTitle{
            padding:10px 20px;
        }
        .cloudTable td {
            height: 40px;
            min-width: 0px;
            box-sizing: border-box;
            vertical-align: middle;
            position: relative;
            border-bottom: 1px solid #e0e6ed;
        }
        /*  表头 */
        .cloudTable_header tr {
            background-color: #efeff1;
        }
        .cloudTable_header th {
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            border-bottom: 1px solid #e0e6ed;
            border-right: 1px solid #e0e6ed;
            padding: 10px 0px;
            white-space: nowrap;
            overflow: hidden;
            font-weight: bold;
            text-align:center;
        }

        /* 表身体 */
        .cloudTable_body tr td {
            height: 40px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        }
        .cloudTable_body tr td {
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            border-right: 1px solid #e0e6ed;
        }
        .cloudMtxTable_body{
            /*height:102px;*/
            height:402px;
            width:100%;
            overflow-y: auto;
            border-bottom: 1px solid #e0e6ed;
        }

        /* 公用样式 */
        .data-cell {
            padding-left: 15px;
            padding-right: 15px;
            font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        }
        .cloudTable_body tr:hover {
            background-color: #c5e8fe;
        }

    </style>
</head>
<%
    String name=request.getParameter("name");
    String document=request.getParameter("document");
    String organ=request.getParameter("organ");
    int len;
    Pd_zhengce[] pddsall=null;
    Thesql thesql;
    if(name==null){name="";}
    if(document==null){document="";}
    if(organ==null){organ="";}

    thesql=new Thesql();
    pddsall=thesql.policy_DimQuery(name,document,organ);
    len= pddsall.length;


%>
<body onload="goPage(1,10);">
<div class="cloudTableAuto">
    <!-- 第一个table -->
    <table class="cloudTable cloudMtxTableHead">
        <colgroup>
            <col width="230px">
            <col width="220px">
            <col width="60px">
            <col width="90px">
            <col width="90px">
        </colgroup>
        <thead class="cloudTable_header">
        <tr>
            <th>政策名称</th>
            <th>发文机构</th>
            <th>颁布日期</th>
            <th>政策分类</th>
            <th>操作</th>
        </tr>
        </thead>
    </table >
    <div class="cloudMtxTable_body" >
        <table style="table-layout:fixed;border: 1px solid #e0e6ed;font-size: 16px;width:100%;" id="idData" >
            <colgroup >
                <col width="230px">
                <col width="220px">
                <col width="60px">
                <col width="90px">
                <col width="90px">
            </colgroup>
            <tbody class="cloudTable_body ">
        <%
            for(int i=0;i<len;i++)
            {
        %>
            <tr>
                <td class="data-cell" ><%out.print(pddsall[i].name); %></td>
                <td class="data-cell" ><%out.print(pddsall[i].organ); %></td>
                <td ><%out.print(pddsall[i].pubdata); %></td>
                <td ><%out.print(pddsall[i].type); %></td>
                <td ><a href="">查看</a></td>
            </tr>
        <%}%>
        </table>
    </div>
    <div class="cloudTableAuto" >

        <table width="60%" align="center" >
            <tr><td style="font-size:14px;"><div id="barcon" name="barcon"></div></td></tr>
        </table>
        <script type="text/javascript">
            /**
             * 分页函数
             * pno--页数
             * psize--每页显示记录数
             * 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数
             * 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能
             **/
            function goPage(pno,psize){
                var itable = document.getElementById("idData");
                var num = itable.rows.length;//表格所有行数(所有记录数)
                console.log(num);
                var totalPage = 0;//总页数
                var pageSize = psize;//每页显示行数
                //总共分几页
                if(num/pageSize > parseInt(num/pageSize)){
                    totalPage=parseInt(num/pageSize)+1;
                }else{
                    totalPage=parseInt(num/pageSize);
                }
                var currentPage = pno;//当前页数
                var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31
                var endRow = currentPage * pageSize;//结束显示的行   40
                endRow = (endRow > num)? num : endRow;    40
                console.log(endRow);
                //遍历显示数据实现分页
                for(var i=1;i<(num+1);i++){
                    var irow = itable.rows[i-1];
                    if(i>=startRow && i<=endRow){
                         irow.style.display = "block";
                         irow.cells[0].style.width="290px";
                         irow.cells[1].style.width="220px";
                         irow.cells[2].style.width="60px";
                         irow.cells[3].style.width="90px";
                         irow.cells[4].style.width="90px";
                    }else{
                        irow.style.display = "none";
                    }
                }
                var pageEnd = document.getElementById("pageEnd");
                var tempStr = ""+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"";
                if(currentPage>1){
                    tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
                    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
                }else{
                    tempStr += "首页";
                    tempStr += "<上一页";
                }

                if(currentPage<totalPage){
                    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
                    tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
                }else{
                    tempStr += "下一页>";
                    tempStr += "尾页";
                }

                document.getElementById("barcon").innerHTML = tempStr;

            }
        </script>
    </div>
</div>
</body>
</html>

 

posted @ 2023-10-12 14:09  lao_bing  阅读(14)  评论(0)    收藏  举报