增加分页

nngkxxdp/src/main/resources/static/hqzc/index.html

@@ -23,6 +23,16 @@
     <link rel="apple-touch-icon" sizes="114x114" href="http://www.beijing.gov.cn/images/apple-touch-icon-114x114.png"> -->
     <!-- 网站图标-e -->
     <link rel="stylesheet" href="./index.css">
+    <style>
+        .btn {
+            width: 105px;
+            height: 43.75px;
+            line-height: 43.75px;
+            background: #004A93;
+            color: #fff;
+            border-radius: 122px;
+        }
+    </style>
     <!-- <script src="js/jquery.min.js"></script> -->
     <script src="./jquery-3.6.1.js"></script>
 
@@ -91,20 +101,20 @@
                         value="文化旅游业">文化旅游业</li>
                 <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
                         value="外资外贸">外资外贸</li>
-                <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
-                        value="普惠性">普惠性</li>
+                <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox" value="普惠性">普惠性
+                </li>
                 <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
                         value="批发零售业">批发零售业</li>
-                <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
-                        value="农业">农业</li>
+                <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox" value="农业">农业
+                </li>
                 <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
                         value="科技创新">科技创新</li>
                 <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
                         value="交通运输业">交通运输业</li>
-                <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
-                        value="工业">工业</li>
-                <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
-                        value="房地产">房地产</li>
+                <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox" value="工业">工业
+                </li>
+                <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox" value="房地产">房地产
+                </li>
                 <li><label></label><input type="checkbox" onclick="clickCheckbox()" name="hylxCheckbox"
                         value="餐饮住宿业">餐饮住宿业</li>
             </ul>
@@ -115,74 +125,84 @@
             <ul class="check_content res_depart"></ul>
             <div class="zk"><i></i>展开</div>
         </div>
-    </div>
-    <div class="box mt20">
-        <div class="msg">为您查找到（<span id="totalDocs"></span>）条 惠企事项<div class="msjxbtn"><img style="cursor: pointer;"
-                    onclick="msjxClick()" src="./image/zt_qyfc_icon.png"><span style="cursor: pointer;"
-                    onclick="msjxClose()">关闭</span></div>
-        </div>
-        <input id="extra_param" name="free" hidden>
-        <div class="zclist">
-        </div>
-        <div class="changepage">
-            <div class="changepage"></div>
-            <script type="text/javascript" src="js/fcfg/jquery.pagination.js"></script>
-            <script type="text/javascript">
-
-                /**
-                 * @param totlePage 总页数
-                 * @param currentPage   当前页 1开始
-                 * @param pageSize  每页显示数量
-                 */
-                function pagintion(totlePage, currentPage, pageSize, totleHits) {
-                    var pageNum = parseInt(totlePage / pageSize);
-                    if (totlePage % pageSize != 0) {
-                        pageNum += 1;
+        <div class="box mt20">
+            <div class="msg">为您查找到（<span id="totalDocs"></span>）条 惠企事项<div class="msjxbtn"><img style="cursor: pointer;"
+                        onclick="msjxClick()" src="./image/zt_qyfc_icon.png"><span style="cursor: pointer;"
+                        onclick="msjxClose()">关闭</span></div>
+            </div>
+            <input id="extra_param" name="free" hidden>
+            <div class="zclist">
+            </div>
+            <!-- <div class="changepage">
+                <div class="changepage"></div>
+                <script type="text/javascript" src="js/fcfg/jquery.pagination.js"></script>
+                <script type="text/javascript">
+    
+                    /**
+                     * @param totlePage 总页数
+                     * @param currentPage   当前页 1开始
+                     * @param pageSize  每页显示数量
+                     */
+                    function pagintion(totlePage, currentPage, pageSize, totleHits) {
+                        var pageNum = parseInt(totlePage / pageSize);
+                        if (totlePage % pageSize != 0) {
+                            pageNum += 1;
+                        }
+                        if (currentPage < 0) {
+                            currentPage = 0
+                        }
+                        $('.changepage').pagination({
+                            pageCount: totlePage,
+                            current: currentPage,
+                            totalData: totleHits,
+                            showData: pageSize,
+                            jump: false,
+                            jumpBtn: '确定',
+                            coping: false,
+                            prevContent: '上一页',
+                            nextContent: '下一页',
+                            jumpBtnCls: 'jump-ipt',
+                            callback: function (api) {
+                                if (api.getCurrent() > totlePage) {
+                                    alert("共" + totlePage + "页,请输入正确页码。");
+                                    e.preventDefault();
+                                } else if (api.getCurrent() > 500) {
+                                    //alert("请输入小于200的页码。");
+                                    $("#page").val(1);
+                                    showPolicyList();
+                                } else {
+                                    $("#page").val(api.getCurrent());
+                                    showPolicyList();
+                                }
+                            }
+                        });
+    
+                        displayPageInfo(totlePage);
                     }
-                    if (currentPage < 0) {
-                        currentPage = 0
+    
+                    function displayPageInfo(totlePage) {
+                        var pageHtml = "<span style='width: 100px;'>共&nbsp;" + totlePage + "&nbsp;页</span>";
+                        $(".next").after(pageHtml);
                     }
-                    $('.changepage').pagination({
-                        pageCount: totlePage,
-                        current: currentPage,
-                        totalData: totleHits,
-                        showData: pageSize,
-                        jump: false,
-                        jumpBtn: '确定',
-                        coping: false,
-                        prevContent: '上一页',
-                        nextContent: '下一页',
-                        jumpBtnCls: 'jump-ipt',
-                        callback: function (api) {
-                            if (api.getCurrent() > totlePage) {
-                                alert("共" + totlePage + "页,请输入正确页码。");
-                                e.preventDefault();
-                            } else if (api.getCurrent() > 500) {
-                                //alert("请输入小于200的页码。");
-                                $("#page").val(1);
-                                showPolicyList();
-                            } else {
-                                $("#page").val(api.getCurrent());
-                                showPolicyList();
-                            }
-                        }
-                    });
-
-                    displayPageInfo(totlePage);
-                }
-
-                function displayPageInfo(totlePage) {
-                    var pageHtml = "<span style='width: 100px;'>共&nbsp;" + totlePage + "&nbsp;页</span>";
-                    $(".next").after(pageHtml);
-                }
-
-            </script>
-
+    
+                </script>
+    
+            </div> -->
+        </div>
+        <div style="width: 100%;display: flex;height: 52.5px;margin-top:20px" class="page">
+            <div id="pageMessage" style="width: 50%;display: flex;align-items: center;justify-content: flex-start">
+            </div>
+            <div style="width: 50%;display: flex;align-items: center;justify-content: flex-end">
+                <button class="hand btn" id="page1" style="font-size: 17.5px">上一页</button>
+                <button class="hand btn" id="page2" style="font-size: 17.5px;margin-left: 4.3px">下一页</button>
+            </div>
         </div>
     </div>
     <!--内容结束-->
     <script>
-        var pageSize = 10;
+        page = 1
+        limit = 10
+        var total
         $(function () {
             $("#page").val(1);
             resDepartment()
@@ -239,6 +259,20 @@
             $("#page").val(1);
             showPolicyList();
         }
+
+        $("#page1").click(function () {
+            if (page > 1) {
+                page = page - 1
+            }
+            showPolicyList()
+        })
+        $("#page2").click(function () {
+            if (page < Math.ceil(total / limit)) {
+                page = page + 1
+            }
+            showPolicyList()
+        })
+
         //展现文档信息
         function showPolicyList() {
             var page = $("#page").val();
@@ -247,10 +281,10 @@
             var zcfxObj = document.getElementsByName("zcfxCheckbox");
             for (var i = 0; i < zcfxObj.length; i++) {
                 if (zcfxObj[i].checked) {
-                 zcfxArr.push(zcfxObj[i].value);
+                    zcfxArr.push(zcfxObj[i].value);
                 }
             }
-            zcfxArr=zcfxArr.join(',')
+            zcfxArr = zcfxArr.join(',')
             var qygmArr = [];
             var qygmObj = document.getElementsByName("qygmCheckbox");
             for (var i = 0; i < qygmObj.length; i++) {
@@ -265,7 +299,7 @@
                     hylxArr.push(hylxObj[i].value);
                 }
             }
-            hylxArr=hylxArr.join(',')
+            hylxArr = hylxArr.join(',')
             var zzbmArr = [];
             var zzbmObj = document.getElementsByName("zzbmCheckbox");
             for (var i = 0; i < zzbmObj.length; i++) {
@@ -273,14 +307,13 @@
                     zzbmArr.push(zzbmObj[i].value);
                 }
             }
-            zzbmArr=zzbmArr.join(',')
+            zzbmArr = zzbmArr.join(',')
 
             var valTemp = $("#extra_param").val();
-
             $.ajax({
                 type: "get",
                 url: "https://www.cqna.gov.cn/data/policyDelivery/page",
-                data: { page: page, title: qt, zcfxArr: zcfxArr, qygmArr: qygmArr, hylxArr: hylxArr, zzbmArr: zzbmArr, freeApplication: valTemp },
+                data: { page: page, limit: limit, title: qt, zcfxArr: zcfxArr, qygmArr: qygmArr, hylxArr: hylxArr, zzbmArr: zzbmArr, freeApplication: valTemp },
                 dataType: "json",
                 success: function (data) {
                     document.getElementById("totalDocs").innerText = data.count;
@@ -292,6 +325,13 @@
                     //     $(".changepage").css("display", "none");
                     // }
                     var docList = data.data;
+
+                    total = data.count
+                    var pageHtml;
+                    var pageStr = "共 " + Math.ceil(total / limit) + " 页, " + total + " 条记录，当前第 " + page + " 页"
+                    pageHtml = "<div style='font-size: 17.5px'>" + pageStr + "</div>"
+                    $("#pageMessage").html(pageHtml)
+
                     var html = "";
                     if (docList.length > 0) {
                         for (var i = 0; i < docList.length; i++) {
@@ -320,14 +360,14 @@
                             if (docList[i].inquiryPhone) {
                                 html += '<p style="text - align: left;"><img src = "./image/cqnc-six.png" width = "100" height = "22" style = "" title = "咨询电话"></p > <p style="text-align: left;">' + docList[i].inquiryPhone + '</p>'
                             }
-                            html +='<div class="mobnone"><div class="ue_table">'
-                            if(docList[i].procedure){
+                            html += '<div class="mobnone"><div class="ue_table">'
+                            if (docList[i].procedure) {
                                 html += '<p style="text - align: left;"><img src = "./image/cqnc-seven.png" width = "100" height = "22" style = "" title = "办理流程"></p > <p style="text-align: left;">' + docList[i].procedure + '</p>'
                             }
-                            if(docList[i].procedure){
+                            if (docList[i].procedure) {
                                 html += '<p style="text - align: left;"><img src = "./image/cqnc-eight.png" width = "100" height = "22" style = "" title = "办理材料"></p > <p style="text-align: left;">' + docList[i].processingMaterials + '</p>'
                             }
-                            html+='</div><div class="pcnone"></div>'
+                            html += '</div><div class="pcnone"></div>'
                             html += '</dd>';
                             html += '</dl>';
                         }