单纯用<th><td>写的表格,分页实现
来源:互联网 发布:手机淘宝怎么改号码 编辑:程序博客网 时间:2024/05/29 18:56
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;
}
- 单纯用<th><td>写的表格,分页实现
- 单纯用<th><td>写的表格,分页实现
- Dreamweaver 8 新建的表格中td与th
- <th>和<td>标签都是用于表格单元格显示的。
- th td的区别
- CSS设置表格TD TH边框问题
- html表格中的tr td th用法
- Table tr td th表格使用案例
- Table tr td th表格使用案例
- html表格中的tr td th用法
- html表格中的tr td th用法
- 用MATLAB写的单纯形法
- html标签的表格的tbody、tfoot、thead、colgroup、th、tr、td、table
- td和th的区别
- tr、td、th的不同
- 今天写的数据表格分页
- 单纯形的实现
- jsp表格中的<tr> <td> <th> <br> <b> <p>用法
- 架构君公众号推荐 第二期
- LaTeX各种表格
- 自定义模块的创建和使用
- 关于python正则表达式
- JDBC详解
- 单纯用<th><td>写的表格,分页实现
- C++中的yield和fork
- [简单逻辑学]逻辑学的基本原理——否定命题
- 基于分布式环境下限流系统的设计
- Java初学者的感悟
- volatile变量在多线程同步时运用的优点: 1、锁一次只允许一个线程访问值,volatile 允许多个线程执行读操作,因此当使用 volatile 保证读代码路径时,要比使用锁执行全部代码路径获得
- Android四大组件Servier(上)
- 数据字典
- PAT (Basic Level) Practise (中文)1001. 害死人不偿命的(3n+1)猜想 (15)