personalfilehome2.jsp 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%-- <%@include file="/context/mytags.jsp"%> --%>
  3. <link rel="stylesheet" href="plug-in/ace/css/bootstrap.css" />
  4. <!-- <link rel="stylesheet" href="plug-in/easyui/themes/metrole/pagination.css"> -->
  5. <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  6. <script src="plug-in/tools/jquery.pagination.js"></script>
  7. <script type="text/javascript" src="plug-in/ace/js/bootstrap.js"></script>
  8. <!DOCTYPE html >
  9. <div class="row"></div>
  10. <div class="tc mt15">
  11. <div id="Pagination" class="pagination">这里显示分页</div>
  12. </div>
  13. <style>
  14. .col-md-3{
  15. width:14%;
  16. }
  17. .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{
  18. width: 100%;
  19. height: 15%;
  20. }
  21. </style>
  22. <script type="text/javascript">
  23. var pageSize =12; //每页显示多少条记录
  24. var total=${total}; //总共多少记录
  25. $(function() {
  26. Init(0); //注意参数,初始页面默认传到后台的参数,第一页是0;
  27. console.log($.fn.jquery);//jquery-1的版本号
  28. console.log($.fn.pagination);//pagination扩展函数
  29. $("#Pagination").pagination(total, {
  30. callback: PageCallback,
  31. prev_text: '上一页',
  32. next_text: '下一页',
  33. items_per_page: pageSize,
  34. num_display_entries: 6, //连续分页主体部分显示的分页条目数
  35. num_edge_entries: 1, //两侧显示的首尾分页的条目数
  36. });
  37. function PageCallback(index, jq) { //前一个表示您当前点击的那个分页的页数索引值,后一个参数表示装载容器。
  38. Init(index);
  39. }
  40. });
  41. function Init(pageIndex){ //这个参数就是点击的那个分页的页数索引值,第一页为0,上面提到了,下面这部分就是AJAX传值了。
  42. $.ajax({
  43. type: "post",
  44. url:"PersonalFileController.do?getimagelist&rows="+pageSize+"&page="+pageIndex,
  45. async: false,
  46. dataType: "json",
  47. success: function (data) {
  48. $(".row").empty();
  49. var array = data;
  50. for(var i=0;i<array.length;i++){
  51. var info=array[i];
  52. if(info.accUrl != null){
  53. $(".row").append('<div class="col-sm-6 col-md-3"><div class="thumbnail"><img src="'+info.accUrl
  54. +'" alt="通用的占位符缩略图"> '
  55. +'<div class="caption"> '
  56. +'<h5>上传时间</h5> '
  57. +'<p>'+info.createtime+'</p> <p>'
  58. +' <a href="#" class="btn btn-primary" role="button">下载 </a>'
  59. +' <a href="#" class="btn btn-default" role="button">删除 </a>'
  60. +'</p></div></div></div>') ;
  61. }
  62. }
  63. },
  64. error: function () {
  65. alert("请求超时,请重试!");
  66. }
  67. });
  68. };
  69. </script>