前端分页拼接页码

最新推荐文章于 2024-04-28 00:00:00 发布

金牛不懂不懂

最新推荐文章于 2024-04-28 00:00:00 发布

阅读量992

点赞数

分类专栏： Java 文章标签：分页 jquery download

本文链接：https://blog.csdn.net/u010810559/article/details/45722255

版权

Java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

该界面是用来实现分页下载的，一共显示五页页码，如图

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="${cxt}/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="${cxt}/css/main.css"/>
       <link rel="stylesheet" type="text/css" href="${cxt}/css/style.css"/>
    <script type="text/javascript" src="${cxt}/js/jquery-1.7.1min.js"></script>
    <script type="text/javascript">

    function chkall() {
    var chall = document.getElementsByName("chall");
    var chks = document.getElementsByName("chk");
    for (var i = 0; i < chks.length; i++) {
      chks[i].checked = chall[0].checked;
    }
    }
    function check() {
    var chall = document.getElementsByName("chall");
    var chks = document.getElementsByName("chk");
    var nums = 0;
    for (var i = 0; i < chks.length; i++) {
      if (chks[i].checked) {
       ++nums;
      } else {
       --nums;
      }
      if (nums == chks.length)
       chall[0].checked = true;
      else
       chall[0].checked = false;
    }
    }


    $(document).ready(
      function() {

      var uf_mob=$('#uf_mob').val();

      if(uf_mob==null||uf_mob==''){

        alert("会话已超时请您重新登录");
        location.href="${cxt}/index.jsp";
      }
      operatePage();
     });

    function operatePage(){
      $("#pageUtile").html("");
      $("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage=${page.mCurrentPage-1}' class='page-prev'>上一页</a>")
      if($("#allNum").val() < 6){
    for(var i = 1; i < $("#allNum").val()*1+1*1; i++){

        $("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage="+i+"'>"+i+"</a>")

       }
      }

      else if($("#nowNum").val()*1+4*1<$("#allNum").val() ){

       for(var i = $("#nowNum").val(); i < $("#nowNum").val()*1+5*1; i++){

        $("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage="+i+"'>"+i+"</a>")

       }
      }else{
    for(var i = $("#allNum").val()*1-4*1; i < $("#allNum").val()*1+1*1; i++){

        $("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage="+i+"'>"+i+"</a>")

       }
      }
   $("#pageUtile") .append("<a href='${cxt}/mobLogin/getFileList?mCurrentPage=${page.mCurrentPage+1}' class='page-next'>下一页</a>");

    }


     function download(){
     var ids ="";
         var chks = document.getElementsByName("chk");
         for(var i=0;i<chks.length;i++)
         {
           if(chks[i].checked)
           {
          ids += chks[i].value + ",";
           }
         }
         if(ids==""){
         alert("请选择需要下载的文件!");
         return;
         }
     var url = "${cxt}/downloadFiles?ids="+ids;
     location.href = url;

     }

</script>


</head>
<body>
<div class="topbar-wrap white">
    <div class="topbar-inner clearfix">
        <div class="topbar-logo-wrap clearfix">
            <h1 class="topbar-logo"><a href="index.html" class="navbar-brand">资料管理库</a></h1>
        </div>
        <div class="top-info-wrap">
            <ul class="top-info-list clearfix">
                <li><a href="${cxt}/index.jsp">退出</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container clearfix">
    <div class="sidebar-wrap">
        <div class="sidebar-content">
            <ul class="sidebar-list">
                <li>
                    <a href = "${cxt}/mobLogin/getDetailList?uf_mob=${userMap.UF_MOB}"><img class="icon-font" src="${cxt}/images/fill.png"/>个人信息</a>
                </li>
                <li>
                    <a href = "${cxt}/mobLogin/getFileList" class="on" href="${cxt}/mobLogin/getFileList"><img class="icon-font" src="${cxt}/images/down.png"/>下载资料</a>
                </li>
    <li>
                  <c:if test="${userMap.GROUPNAME=='培训部'}">
        <a href="${cxt}/mobLogin/fileUpload"><img class="icon-font" src="${cxt}/images/up.png"/>上传资料</a>
      </c:if>

                </li>
            </ul>
        </div>
    </div>
    
    <div class="main-wrap">
        <div class="result-wrap">
            <form name="myform" id="myform" method="post">
                <div class="result-content">
                    <table class="result-tab" width="100%">
                        <tr>
                            <th class="tc" width="5%">

                            <input type="checkbox" name="chall" value="" class="allChoose" οnclick="chkall();">
                           </th>
                            <th>文件名称</th>

                            <th>添加时间</th>
                            <th>添加人</th>
                        </tr>
                        <c:forEach items="${resultBean.data}" var="data">
                        <tr>
                        <td class="tc"><input type="checkbox" name="chk"
          value="${data.ID}" οnclick="check();"></td>

                            <td><span target="_blank" id = "${data.ID}" title="关于下发《信通（中国）投资有限公司员工考勤休假管理办法》的通知"> ${data.FILE_NAME} </span></td>

                            <td>${data.ADDTIME}</td>
                            <td>${data.ADD_PERSON}</td>

                        </tr>
                        </c:forEach>
                    </table>
     <div class="btn">
      <a class="btn-down" href="javascript:download();">下载</a>
     </div>
     <div class="page">

     </div>
                </div>
            </form>
        </div>
    </div>
    
   <div class="pagnation" id="pagnation" >
    <li id="pageUtile" >
</li>
</div>
<div class="pagnation-tips">总[${page.mPages}]页       当前 [${page.mCurrentPage}]页</div>
</div>