//使用Ajax异步查询数据
<div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th width="30">#</th> <th width="30"><input type="checkbox"></th> <th>name</th> <th width="100">操作</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <td colspan="6" align="center"> <ul class="pagination"> </ul> </td> </tr> </tfoot> </table> </div> <script type="text/javascript"> $(function () { init(); showMenu(); }); //使用Ajax异步查询数据 function queryPage(pageno) { var dataObj = { "pageno": pageno, //pageno 是属性名称,是否增加双引号无所谓 "pagesize": 3 }; if (condition) { dataObj.queryText = $("#queryText").val(); //增加模糊查询条件 } var loadingIndex = -1; $.ajax({ url: "${APP_PATH}/role/pageQuery.do", type: "post", data: dataObj, beforeSend: function () { loadingIndex = layer.msg('数据查询中', {icon: 6}); return true; }, success: function (result) { //显示结果 layer.close(loadingIndex); if (result.success) { var pageObj = result.page; var roleList = pageObj.data; var content = ""; $.each(roleList, function (i, n) { content += "<tr>"; content += " <td>" + (i + 1) + "</td>"; content += " <td><input type='checkbox' value='" + n.id + "'></td>"; content += " <td>" + n.name + "</td>"; content += " <td>"; content += " <button type='button' onclick='window.location.href="${APP_PATH}/role/assign.htm?roleid=" + n.id + ""' class='btn btn-success btn-xs'>"; content += " <i class=' glyphicon glyphicon-check'></i>"; content += " </button>"; content += " <button type='button' onclick='window.location.href="${APP_PATH}/role/edit.htm?pageno=" + pageObj.pageno + "&id=" + n.id + ""' class='btn btn-primary btn-xs'>"; content += " <i class=' glyphicon glyphicon-pencil'></i>"; content += " </button>"; content += " <button type='button' class='btn btn-danger btn-xs' onclick='deleteRole(" + n.id + ","" + n.name + "")'>"; content += " <i class=' glyphicon glyphicon-remove'></i>"; content += " </button>"; content += " </td>"; content += "</tr>"; //$("tbody").append(content); $("tbody").html(content); }); //拼接导航条 var pageContent = ""; if (pageObj.pageno != 1) { pageContent += '<li><a href="#" onclick="changePageno(' + (pageObj.pageno - 1) + ')">上一页</a></li>'; } for (var i = 1; i <= pageObj.totalno; i++) { if (i == pageObj.pageno) { pageContent += '<li class="active"><a href="#" onclick="changePageno(' + i + ')">' + i + '</a></li>'; } else { pageContent += '<li><a href="#" onclick="changePageno(' + i + ')">' + i + '</a></li>'; } } if (pageObj.pageno != pageObj.totalno) { pageContent += '<li><a href="#" onclick="changePageno(' + (pageObj.pageno + 1) + ')">下一页</a></li>'; } $(".pagination").html(pageContent); } else { layer.msg("角色分页查询数据失败", {time: 1000, icon: 5, shift: 6}); } }, error: function () { layer.msg("角色分页查询数据错误", {time: 1000, icon: 5, shift: 6}); } }); } var condition = false; //条件查询 function queryRole() { var queryText = $("#queryText"); if (queryText.val() == "") { layer.msg("查询条件不能为空", {time: 1000, icon: 5, shift: 6}, function () { queryText.focus(); }); return; } condition = true; queryPage(1); } function changePageno(pageno) { //window.location.href = "<%=request.getContextPath() %>/role/index.htm?pageno="+pageno; queryPage(pageno); } function init() { $(".list-group-item").click(function () { if ($(this).find("ul")) { $(this).toggleClass("tree-closed"); if ($(this).hasClass("tree-closed")) { $("ul", this).hide("fast"); } else { $("ul", this).show("fast"); } } }); <c:if test="${empty param.pageno}"> queryPage(1); </c:if> <c:if test="${not empty param.pageno}"> queryPage(${param.pageno}); </c:if> } </script>