單純用寫的表格，分頁實現
1、html：
<div id="tableList">
<table class="table table-bordered table-striped table-hover" id="rgtable1" style="color:#444444">
<thead>
<tr>
<th>角色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<#list urlBeanList as urlBean>
<tr class="odd">
<td><#if urlBean.urlType?exists>${urlBean.urlType}<#else>無</#if></td>
<td>
<button class="buttonnew button--winona2 button--round-l button--border-thin"
onclick="urlLookUp('${urlBean.urlType}')"><span><span>檢視</span></span>
</button>
<button class="buttonnew button--winona2 button--round-l button--border-thin"
onclick="urlUpdate('${urlBean.urlType}')"><span><span>修改</span></span>
</button>
<button class="buttonnew button--winona2 button--round-l button--border-thin" onclick="urlDelete('${urlBean.urlType}')">
<span><span>刪除</span></span></button>
</td>
</tr>
</#list>
</tbody>
</table>
<#if pages??>
<div class="pageNu" align="right">
總共 ${pages?c}頁|第${currentpage?c}頁
<#if (currentpage>1)>
<a style='cursor:pointer;' onclick = lastPage('${currentpage?c}')>上一頁</a>
<#else>
</#if>
<#if (currentpage<pages)>
<a style='cursor:pointer;' onclick = nextPage('${currentpage?c}')>下一頁</a>
<#else>
</#if>
轉至<input type="text" name="pageNum" id="pageNum" value="${currentpage?c}" size="5"/>
<button class="btn btn-success" id="goPageByNum" onclick="goPageByNum()"><span><span>Go</span></span></button>
</div>
</#if>
</div>
2、js：
function lastPage(lastPage) {
lastPage--;
var url = "/ps-admin-nimitz/system/urlList.json?page=" + lastPage;
$.ajax({
url: url,// 跳轉到 action
success: function (data) {
appendData(data);
},
error: function () {
alert("異常");
}
});
}
function nextPage(nextPage) {
nextPage++;
var url = "/ps-admin-nimitz/system/urlList.json?page=" + nextPage;
$.ajax({
url: url,// 跳轉到 action
success: function (data) {
appendData(data);
},
error: function () {
alert("異常");
}
});
}
function goPageByNum() {
var maxPage = $.trim($("#maxPage").val());
var pageNum = $("#pageNum").val();
var pattern = /^[\d]*$/;
if (!pattern.test(pageNum)) {
alert("請輸入有效的頁數");
return;
}
pageNum++;
pageNum--;
maxPage++;
maxPage--;
if (pageNum > maxPage) {
pageNum = maxPage;
}
if (pageNum < 1) {
pageNum = 1;
}
var url = "/ps-admin-nimitz/system/urlList.json?page=" + pageNum;
$.ajax({
url: url,// 跳轉到 action
success: function (data) {
appendData(data);
},
error: function () {
alert("異常");
}
});
}
function appendData(jsonData) {
var table = "<table class=\"table table-bordered table-striped table-hover\" style=\"color:#444444\"><thead><tr>" +
"<th>角色</th>" +
"<th>操作</th>" +
"</tr></thead>";
table = table + "<tbody align='center'>";
var list = jsonData.urlBeanList;
for (var i = 0; i < list.length; i++) {
var str1 = list[i];
var urlType = str1.urlType;
table = table + "<td nowrap title=\"" + urlType + "\">";
if (urlType != null) table = table + urlType + "</td>";
else table = table + "</td>";
table = table + "<td><button class=\"buttonnew button--winona2 button--round-l button--border-thin\" onclick=\"urlLookUp('" + urlType + "')\">檢視</button>" +
"<button class=\"buttonnew button--winona2 button--round-l button--border-thin\" onclick=\"urlUpdate('" + urlType + "')\">修改</button>"+
"<button class=\"buttonnew button--winona2 button--round-l button--border-thin\" onclick=\"urlDelete('" + urlType + "')\">刪除</button></td>";
table = table + "</tr>";
}
table = table + "</tbody></table>";
table = table + "<div class=\"pageNu\" align=\"right\">";
table = table + "總共" + jsonData.pages + "頁|第" + jsonData.currentpage + "頁";
if (jsonData.currentpage > 1) {
table = table + "<a style='cursor:pointer;' onclick = lastPage(" + jsonData.currentpage + ")>上一頁</a>";
}
if (jsonData.currentpage < jsonData.pages) {
table = table + "<a style='cursor:pointer;' onclick = nextPage(" + jsonData.currentpage + ")>下一頁</a>";
}
table = table + "轉至<input type=\"text\" name=\"pageNum\" id=\"pageNum\" value=" + jsonData.currentpage + " size=\"5\"/>"
+ "<button class=\"btn btn-success\" onclick=\"goPageByNum()\"><span><span>Go</span></span></button>";
$("#currentpage").val(jsonData.currentpage);
$("#maxPage").val(jsonData.pages);
$('#tableList').html(table);
$('#tableList').show();
}
3、java後臺 controller：
/*許可權列表*/
@RequestMapping("system/urlList.json")
public String authList2(ModelMap modelMap, HttpServletRequest request, @RequestParam(required = false) String page) {//查詢url列表
int totalpages;
String page1 = page == null ? "1" : page.trim();
int pages = Integer.parseInt(page1);
int maxCount = filterService.getUrlPages()-1;//admin不算，所以減去1
if (maxCount % seg == 0) {
totalpages = maxCount / seg;
} else {
totalpages = maxCount / seg + 1;
}
List<UrlBean> urlBeanList = new ArrayList<UrlBean>();
if (totalpages == 0) {
pages = 0;
} else {
if (pages > totalpages) {
pages = totalpages;
}
int start = (pages - 1) * seg + 1;
urlBeanList = filterService.getUrlList(start, -1);
modelMap.put("urlBeanList", urlBeanList);
}
modelMap.put("urlBeanList", urlBeanList);
modelMap.put("pages", totalpages);
modelMap.put("currentpage", pages);
psInfoService.baseInfo(request, modelMap);
modelMap.put("component", "urlList");
return "JSON";
}
4、java後臺service：
public List<UrlBean> getUrlList(int page, int segment) {
return filterSql.getUrlList(page, segment);
}
5、java後臺Dao：
public List<UrlBean> getUrlList(int page, int segment) {//查詢url列表
int seg1 = seg;
if (segment != -1) {//批量匯出專用邏輯，一次匯出segment條。
seg1 = segment;
}
List<UrlBean> urlBeanList;
String sql = " select DISTINCT t1.role_name from ps_role t1 where t1.role_name !='ROLE_ADMIN' LIMIT ?,? ";
urlBeanList = urlJdbcTemplate.query(sql, new Object[]{(page - 1), seg1}, new RowMapper<UrlBean>() {
@Override
public UrlBean mapRow(ResultSet rs, int i) throws SQLException {
UrlBean urlBean = new UrlBean();
urlBean.setUrlType(rs.getString("role_name"));
return urlBean;
}
});
return urlBeanList;
}