1.排序文件commonSort.js
/** 使用
1. form的id必须以orderByForm开头如：orderByForm1,orderByFormUser等
form下必须有<input type="hidden" id="orderByStr" name="orderByStr" th:value="${orderByStr}"/>
2。 表格table必须有表头，表头元素必须使用th
3。th标签中必须包含span标签，span标签的order值为要排序的数据库字段columnName
后台必须有orderBy字段的处理（其中orderByStr=columnName,desc|asc）
model.addAttribute("orderByStr", request.getParameter("orderByStr"));
*/
/*<![CDATA[*/
$(function(){
/*------------------------------排序组件处理流程-------------------------------------------------------*/
var form = $("form[id^=orderByForm]");
// 初始化样式
var strs = $("#orderByStr").val().split(";");
alert(strs);
$("th > span.glyphicon").each(function(){
if(strs && strs.length >= 1){
var i = 0;
for(;i <= strs.length; i++){
if(strs[i] && strs[i] != "" && strs[i].indexOf(this.id) != -1){
var strs1 = strs[i].split(",");
alert("str1:" + strs1);
if(strs1[1] == "asc"){
$(this).removeClass("glyphicon-arrow-up");
$(this).addClass("glyphicon glyphicon-arrow-down")
.css({"cursor":"pointer","padding-right":"3px"});
}
if(strs1[1] == "desc"){
$(this).removeClass("glyphicon-arrow-down");
$(this).addClass("glyphicon glyphicon-arrow-up")
.css({"cursor":"pointer","padding-right":"3px"});
}
}
}
if(i < strs.length - 1){
$(this).removeClass("glyphicon-arrow-down");
$(this).addClass("glyphicon glyphicon-arrow-up")
.css({"cursor":"pointer","padding-right":"3px"});
}
} else {
$(this).removeClass("glyphicon-arrow-down");
$(this).addClass("glyphicon glyphicon-arrow-up")
.css({"cursor":"pointer","padding-right":"3px"});
}
});
// 点击排序按钮事件处理
$("th > span.glyphicon").click(function(){
var classes = $(this).attr("class").split(" ");
var tmp = $("#orderByStr").val();
var obj = $("#orderByStr");
var columnName = $(this).attr("order");
alert(columnName);
for(var i in classes){
if(classes[i] == "glyphicon-arrow-up"){
var order = columnName + ",asc";
// 1。没有排序信息时加上排序，
// 2。有排序信息且包含包含该排序列时更改排序方式，
// 3。有排序信息，但不包含该排序列时加上该排序信息
if(tmp && tmp.indexOf(columnName) != -1){
tmp = tmp.replace(columnName + ",desc", order);
}else{
tmp = order;
}
/*else{
tmp += ";" + order;
}*/
obj.val(tmp);
form.submit();
} else if(classes[i] == "glyphicon-arrow-down"){
var order = columnName + ",desc";
// 1。没有排序信息时加上排序，
// 2。有排序信息且包含包含该排序列时更改排序方式，
// 3。有排序信息，但不包含该排序列时加上该排序信息
if(tmp.indexOf(columnName) != -1){
tmp = tmp.replace(columnName + ",asc", order);
} else{
tmp = order;
}
/*else{
tmp += ";" + order;
}*/
obj.val(tmp);
form.submit();
}else{
continue;
}
}
});
});
/*]]>*/
2.分页js,commonPage.js
/** 使用
1. form的id必须以orderByForm开头如：orderByForm1,orderByFormUser等
2。分页必须有以下标签
<nav id="tslCommon-Page">
<input type="hidden" name="currentPageNum" th:value="${currentPageNum}"/>
<input type="hidden" name="totalPageCnt" th:value="${totalPageCnt}"/>
<input type="hidden" id="totalRecord" th:value="${totalRecord}"/>
</nav>
3。支持分页后台必须有：currentPageNum和totalPageCnt的处理如：
model.addAttribute("currentPageNum", pageNum);
model.addAttribute("totalPageCnt", page.getTotalPageCnt());
model.addAttribute("totalPageCnt", page.getTotalPageCnt());
4。分页后台可以获取两个属性currentPageNum和totalPageCnt的值
request.getParameter("currentPageNum")(###默认分页查询第一次时，其值为空，请注意处理###)
request.getParameter("totalPageCnt")(###默认分页查询第一次时，其值为空，请注意处理###)
*/
/*<![CDATA[*/
$(function(){
var form = $("form[id^=orderByForm]");
/*------------------------分页组件处理流程----------------------------------------------*/
// 页码显示：根据totalPageCnt决定第一次页面加载时显示的页面布局
var totalPageCnt = parseInt($("input:hidden[name='totalPageCnt']").val(),10);
var currentPageNum = parseInt($("input:hidden[name='currentPageNum']").val(),10);
initPageCompotent("tslCommon-Page");
showPageAtt(totalPageCnt, currentPageNum);
// 页码点击事件，
// 1。点击页码和高亮页码不一致时移除高亮页码高亮状态，高亮点击的页码,
// 2。一致时什么也不做
$("li[id^='pageNum']").click(function(){
var pageNum = parseInt($(this).text(),10);
if(pageNum && currentPageNum && pageNum == currentPageNum){
return;
}else{
$("input:hidden[name='currentPageNum']").val(pageNum);
form.submit();
}
});
// 点击上一页
$("a[aria-label='Previous']").click(function(){
//var currentPageNum = $("input:hidden[name='currentPageNum']").val();
if(currentPageNum && currentPageNum <= 1){
alert("已经是第一页了！");
return;
}
$("input:hidden[name='currentPageNum']").val(currentPageNum - 1);
form.submit();
});
// 点击下一页
$("a[aria-label='Next']").click(function(){
//var currentPageNum = $("input:hidden[name='currentPageNum']").val();
if(currentPageNum >= totalPageCnt){
alert("已经是最后一页！");
return;
}
$("input:hidden[name='currentPageNum']").val(parseInt(currentPageNum,10) + 1);
form.submit();
});
// 跳转按钮的处理，输入的页码为当前页码时不做任何处理
// 1。输入页码大于totalPageCnt时，给个提示
// 2。输入页码小于1时，给个提示
// 3。其他情况时，直接提交表单
$("#goPage").click(function(){
var inputNum = $("#toPageNum").val();
if(inputNum > totalPageCnt || inputNum < 1){
alert("输入的页面不存在，请重新输入！");
return;
}
$("input:hidden[name='currentPageNum']").val(inputNum);
form.submit();
});
});
// 上一页、下一页显示
// 1。当当前页码<=1时，上一页是不能点击的
// 2。当前页码>=totalPageCnt时，下一页是不能点击的
// 3。当前页码在>1&&<totalPage时，下一页和上一页都能点击
// 4。当totoalPage=1时，上一页和下一页都不能点击
function showPageAtt(totalPageCnt, currentPageNum){
if(!totalPageCnt || totalPageCnt == ""){
totalPageCnt = 0;
}
if(totalPageCnt <= 1){
$("a[aria-label='Previous']").css("disabled", true);
$("a[aria-label='Next']").css("disabled", true);
}else{
if(currentPageNum <= 1){
$("a[aria-label='Previous']").css("disabled", true);
$("a[aria-label='Next']").css("disabled", false);
}else if(currentPageNum >= totalPageCnt){
$("a[aria-label='Previous']").css("disabled", false);
$("a[aria-label='Next']").css("disabled", true);
}else{
$("a[aria-label='Previous']").css("disabled", false);
$("a[aria-label='Next']").css("disabled", false);
}
}
}
// 页码处理
// 1。页面上currentPageNum为10的倍数显示的最大页码为currentPageNum
// 2。页面上currentPageNum不为10的倍数时显示的最大页码另行计算
function showPageInfo(currentPageNum, totalPageCnt){
var info = "";
// 初始化当前页数
if(!currentPageNum || currentPageNum == "" || currentPageNum == 0){
currentPageNum = 1;
}
var max = 0;
// 总页数>=1时，否则只显示一页
if(totalPageCnt >= 1){
if(currentPageNum < 10){
max = 10;
}else{
max = (Math.floor(currentPageNum / 5) + 1) * 5;
}
if(max > totalPageCnt){
max = totalPageCnt;
}
} else {
max = 1;
}
for(var i=max;i > max - 10 && i > 0; i--){
if(i == currentPageNum){
info = '<li id="pageNum' + i + '" class="active"><a href="#" >' + i + '</a></li>' + info;
} else {
info = '<li id="pageNum' + i + '"><a href="#" >' + i + '</a></li>' + info;
}
}
return info;
}
function initPageCompotent(id){
var totalPageCnt = parseInt($("input:hidden[name='totalPageCnt']").val(), 10);
var currentPageNum = parseInt($("input:hidden[name='currentPageNum']").val(), 10);
var totalRecord = parseInt($("#totalRecord").val(), 10);
totalPageCnt = (totalPageCnt && totalPageCnt != "") ? totalPageCnt : 0;
currentPageNum = (currentPageNum && currentPageNum != "") ? currentPageNum : 1;
var str = '<ul class="pagination" style="padding:0;margin:0">'
+ ' <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>'
+ showPageInfo(currentPageNum,totalPageCnt)
+ ' <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>'
+ ' <li style="padding:10px;"> </li>'
+ ' <li>'
+ ' <label>共'+ totalRecord + '条记录，共' + totalPageCnt + '页</label>'
+ ' <input size="1.5" id="toPageNum" style="height:30px;"/>'
+ ' </li>'
+ ' <li>'
+ ' <button id="goPage" type="button" class="btn btn-primary">GO <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span></button>'
+ ' </li>'
+ '</ul>';
$("#" + id).append(str);
}
/*]]>*/
3.简单的页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My test project</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" th:src="@{/app/js/vendor/jquery-1.11.1.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/app/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/app/css/font-awesome.min.css}" />
<script th:inline="javascript" th:src="@{/app/js/commonPage.js}"></script>
<script th:inline="javascript" th:src="@{/app/js/commonSort.js}"></script>
</head>
<body>
<form id="orderByForm" action="/pageAndSortDemo.html">
<p><h3><strong>bootstrap简单表单的分页排序Doem</strong></h3></p>
<input type="hidden" id="orderByStr" name="orderByStr" th:value="${orderByStr}"/>
<table class="table table-bordered" style="padding:0;margin-bottom:2px;width:50%">
<thead>
<tr>
<th>
<span order="test" class="glyphicon glyphicon-arrow-up" style="cursor: pointer;padding-right:"></span>
test
</th>
<th>
<span order="name" class="glyphicon glyphicon-arrow-up" style="cursor: pointer;"></span>
name
</th>
</tr>
</thead>
<tr>
<td>123456</td>
<td>小心火烛</td>
</tr>
</table>
<nav id="tslCommon-Page">
<input type="hidden" name="currentPageNum" th:value="${currentPageNum}"/>
<input type="hidden" name="totalPageCnt" th:value="${totalPageCnt}"/>
<input type="hidden" id="totalRecord" th:value="${totalRecord}"/>
</nav>
</form>
</body>
</html>
4.后台的处理
Map<String, Object> map = new HashMap<String,Object>();
String pageNum = request.getParameter("currentPageNum");
if(pageNum == null || "".equals(pageNum)){
pageNum = "1";
}
map.put("currentPageNum", Integer.valueOf(pageNum));
PageView page = userService.getMapList(map);
model.addAttribute("currentPageNum", pageNum);
if(request.getParameter("orderByStr") == null || "".equals(request.getParameter("orderByStr"))){
model.addAttribute("orderByStr", "test,desc");
}else{
model.addAttribute("orderByStr", request.getParameter("orderByStr"));
}
model.addAttribute("totalPageCnt", 27);
model.addAttribute("totalRecord", 278);5.PageView对象
import java.util.List;
public class PageView {
private long totalRecord = 0;
private int totalPageCnt = 0;
private int pageShowCnt = 0;//page Size
private int currentMaxCnt = 0;
private int currentPageNum = 0;
private List<?> resultList = null;
private long start = 1;
public int getCurrentMaxCnt() {
currentMaxCnt = pageShowCnt * currentPageNum;
return currentMaxCnt;
}
public PageView(int currentPageNum){
this(currentPageNum, 10);
}
public int getPageShowCnt() {
return pageShowCnt;
}
public PageView(int currentPageNum, int pageShowCnt){
this.currentPageNum = currentPageNum;
if(currentPageNum == 0){
this.currentPageNum = 1;
}
this.pageShowCnt = pageShowCnt;
}
public long getTotalRecord() {
return totalRecord;
}
public void setTotalRecord(long totalRecord) {
this.totalRecord = totalRecord;
}
public List<?> getResultList() {
return resultList;
}
public void setResultList(List<?> resultList) {
this.resultList = resultList;
}
public int getTotalPageCnt() {
double tmp = (double)totalRecord / pageShowCnt;
//System.out.println("float tmp :" + tmp);
totalPageCnt = (int) Math.ceil(tmp);
return totalPageCnt;
}
public long getStart() {
if(currentPageNum == 0){
currentPageNum = 1;
}
start = (currentPageNum - 1) * pageShowCnt+1;
return start;
}
public int getCurrentPageNum() {
return currentPageNum;
}
public void setCurrentPageNum(int currentPageNum) {
this.currentPageNum = currentPageNum;
}
public static void main(String[] str){
PageView page = new PageView(1);
page.setTotalRecord(132);
System.out.println("start:" + page.getStart());
System.out.println("total page count :" + page.getTotalPageCnt());
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
