commit.

src/main/resources/static/page.js

@@ -7,75 +7,77 @@
                 ms.bindEvent(obj, args);
             })();
         },
-        //填充html
         fillHtml: function (obj, args) {
             return (function () {
                 obj.empty();
-                //上一页
-                if (args.current > 1) {
-                    obj.append('<li><a href="#" curId="prevPage">&laquo;</a></li>');
-                } else {
-                    obj.append('<li class="disabled"><a>&laquo;</a></li>');
-                }
-                //中间页码
-                if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {
-                    obj.append('<li><a href="#" curId="curNumber">1</a></li>');
-                }
-                if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {
-                    obj.append('<li><a>…</a></li>');
-                }
-                var start = args.current - 2, end = args.current + 2;
-                if ((start > 1 && args.current < 4) || args.current == 1) {
-                    end++;
-                }
-                if (args.current > args.pageCount - 4 && args.current >= args.pageCount) {
-                    start--;
-                }
-                for (; start <= end; start++) {
-                    if (start <= args.pageCount && start >= 1) {
-                        if (start != args.current) {
-                            obj.append('<li><a href="#" curId="curNumber">' + start + '</a></li>');
-                        } else {
-                            obj.append('<li class="active"><a>' + start + '</a></li>');
+                if (args.totalPages > 0) {
+                    /* 上一页 */
+                    if (args.current > 1) {
+                        obj.append('<li><a href="#" curId="prevPage">&laquo;</a></li>');
+                    } else {
+                        obj.append('<li class="disabled"><a>&laquo;</a></li>');
+                    }
+                    /* 中间页 */
+                    if (args.current != 1 && args.current >= 4 && args.totalPages != 4) {
+                        obj.append('<li><a href="#" curId="curNumber">1</a></li>');
+                    }
+                    if (args.current - 2 > 2 && args.current <= args.totalPages && args.totalPages > 5) {
+                        obj.append('<li><a>…</a></li>');
+                    }
+                    var start = args.current - 2, end = args.current + 2;
+                    if ((start > 1 && args.current < 4) || args.current == 1) {
+                        end++;
+                    }
+                    if (args.current > args.totalPages - 4 && args.current >= args.totalPages) {
+                        start--;
+                    }
+                    for (; start <= end; start++) {
+                        if (start <= args.totalPages && start >= 1) {
+                            if (start != args.current) {
+                                obj.append('<li><a href="#" curId="curNumber">' + start + '</a></li>');
+                            } else {
+                                obj.append('<li class="active"><a>' + start + '</a></li>');
+                            }
                         }
                     }
+                    if (args.current + 2 < args.totalPages - 1 && args.current >= 1 && args.totalPages > 5) {
+                        obj.append('<li><a>…</a></li>');
+                    }
+                    if (args.current != args.totalPages && args.current < args.totalPages - 2 && args.totalPages != 4) {
+                        obj.append('<li><a href="#" curId="curNumber">' + args.totalPages + '</a></li>');
+                    }
+                    /* 下一页 */
+                    if (args.current < args.totalPages) {
+                        obj.append('<li><a href="#" curId="nextPage">&raquo;</a></li>');
+                    } else {
+                        obj.append('<li class="disabled"><a>&raquo;</a></li>');
+                    }
                 }
-                if (args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5) {
-                    obj.append('<li><a>…</a></li>');
-                }
-                if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {
-                    obj.append('<li><a href="#" curId="curNumber">' + args.pageCount + '</a></li>');
-                }
-                //下一页
-                if (args.current < args.pageCount) {
-                    obj.append('<li><a href="#" curId="nextPage">&raquo;</a></li>');
-                } else {
-                    obj.append('<li class="disabled"><a>&raquo;</a></li>');
-                }
+                obj.append('<li class="disabled"><a>共 ' + args.totalElements + ' 条，共 ' + args.totalPages + ' 页</a></li>');
             })();
         },
-        //绑定事件
+        /* 绑定事件 */
         bindEvent: function (obj, args) {
             return (function () {
                 obj.on("click", "a[curId=curNumber]", function () {
                     var current = parseInt($(this).text());
-                    ms.fillHtml(obj, {"current": current, "pageCount": args.pageCount});
+                    ms.fillHtml(obj, {"current": current, "totalPages": args.totalPages});
                     if (typeof(args.backFn) == "function") {
                         args.backFn(current);
                     }
                 });
-                //上一页
+                /* 上一页 */
                 obj.on("click", "a[curId=prevPage]", function () {
                     var current = parseInt(obj.children("li.active").text());
-                    ms.fillHtml(obj, {"current": current - 1, "pageCount": args.pageCount});
+                    ms.fillHtml(obj, {"current": current - 1, "totalPages": args.totalPages});
                     if (typeof(args.backFn) == "function") {
                         args.backFn(current - 1);
                     }
                 });
-                //下一页
+                /* 下一页 */
                 obj.on("click", "a[curId=nextPage]", function () {
                     var current = parseInt(obj.children("li.active").text());
-                    ms.fillHtml(obj, {"current": current + 1, "pageCount": args.pageCount});
+                    ms.fillHtml(obj, {"current": current + 1, "totalPages": args.totalPages});
                     if (typeof(args.backFn) == "function") {
                         args.backFn(current + 1);
                     }
@@ -83,9 +85,11 @@
             })();
         }
     };
+
     $.fn.createPage = function (options) {
         var args = $.extend({
-            pageCount: 10,
+            totalElements: 0,
+            totalPages: 0,
             current: 1,
             backFn: function () {
             }

src/main/resources/templates/deviceRecord/list.ftl

@@ -15,11 +15,15 @@
         span {
             margin-right: 15px;
         }
+
+        .pagination > li > a {
+            border: 0;
+        }
     </style>
 </head>
 <body>
-<h3 style="margin-left: 10px">设备访问记录</h3>
-<div class="panel panel-default" style="margin: 10px;padding: 10px">
+<h3 style="margin-left: 12px">设备访问记录</h3>
+<div class="panel panel-default" style="padding: 10px 10px 0px 10px">
     <div class="btn-group">
         <input type="text" class="form-control" id="url" placeholder="访问地址"/>
     </div>
@@ -65,34 +69,35 @@
     <div class="btn-group">
         <a href="#" class="btn btn-primary" onclick="doSearch()" style="margin-bottom: 10px"> 搜索</a>
     </div>
-    <table id="contentTable" class="table">
+    <table class="table">
         <thead>
         <tr>
             <th style="width: 150px">操作时间</th>
-            <th>操作内容<span id="contentTotal" style="float: right;font-weight: normal"></span></th>
+            <th>操作内容</th>
         </tr>
         </thead>
-        <tbody id="contentDiv"></tbody>
+        <tbody id="contentTable"></tbody>
     </table>
-    <ul id="contentPager" class="pagination"></ul>
+    <div style="text-align: right;margin: 0;padding: 0">
+        <ul id="contentPage" class="pagination"></ul>
+    </div>
 </div>
 
 <script src="${base}/styles/jquery/jquery-1.9.1.min.js"></script>
-<script src="${base}/page.js"></script>
+<script src="${base}/page.js?v=20180801"></script>
 <script type="text/javascript">
     var basePath = '${base!}';
     var curPageSize = 10;
 
     $(function () {
-        loadData(1, true);
+        loadData(1);
     });
 
     function doSearch() {
-        $("#contentPager").empty();
-        loadData(1, true);
+        loadData(1);
     }
 
-    function loadData(curPageNo, needCreatePage) {
+    function loadData(curPageNo) {
         var params = {};
         params.url = $('#url').val();
         params.system = $('#system').val();
@@ -111,8 +116,8 @@
         params.pageSize = curPageSize;
         params.pageNo = curPageNo;
 
-        $("#contentDiv").empty();
-        $("#contentTotal").html('共 0 条，共 0 页');
+        $("#contentTable").empty();
+        $("#contentPage").empty();
         $.ajax({
             url: basePath + '/device/record/list',
             contentType: "application/json; charset=UTF-8",
@@ -121,21 +126,18 @@
             data: JSON.stringify(params),
             success: function (response) {
                 if (response && response.code == '200') {
-                    var data = response.data;
-                    if (data.numberOfElements > 0) {
-                        var html = render(data.content);
-                        $("#contentDiv").html(html);
-                        $("#contentTotal").html('共 ' + data.totalElements + ' 条，共 ' + data.totalPages + ' 页');
-                        if (needCreatePage) {
-                            $("#contentPager").createPage({
-                                pageCount: data.totalPages,
-                                current: curPageNo,
-                                backFn: function (current) {
-                                    loadData(current, false);
-                                }
-                            });
+                    var page = response.data;
+                    var list = render(page.content);
+                    $("#contentTable").html(list);
+
+                    $("#contentPage").createPage({
+                        totalElements: page.totalElements,
+                        totalPages: page.totalPages,
+                        current: curPageNo,
+                        backFn: function (current) {
+                            loadData(current);
                         }
-                    }
+                    });
                 }
             }
         });
@@ -143,6 +145,9 @@
 
     function render(list) {
         var html = [];
+        if (!list || list.length == 0) {
+            return html.join('');
+        }
         for (var n = 0; n < list.length; n++) {
             var obj = list[n];
             if (n % 2 == 0) {
@@ -150,7 +155,9 @@
             } else {
                 html.push('<tr style="background-color:#eef1f6">');
             }
-            html.push('<td style="vertical-align: middle;text-align: center;">' + emptyStr(obj.createDate) + '</br>' + emptyStr(obj.ip) + '</td>');
+            html.push('<td style="vertical-align: middle;text-align: center;">');
+            html.push(emptyStr(obj.createDate) + '</br>' + emptyStr(obj.ip));
+            html.push('</td>');
             html.push('<td>');
             html.push('<span>访问地址：' + emptyStr(obj.url) + '</span>');
             html.push('<span>KEY：' + emptyStr(obj.loginKey) + '</span>');