加载与分页
说到HTML5和jquery上的分页问题,优秀的分页插件网上一抓一大把,然而同时适合兼容在Ipad和手机端的网站分页却不是特别多。
或许有人会说,触屏现在流行下拉底部后加载下一页内容,类似微博和QQ空间那种模式,分页过时了。或许,阅读到底部后顺手点一下“下一页”和无需操作自动加载内容继续阅读,这小小的一点会给用户带来很不同的微妙感受。
可以肯定的是,当要展示数据量较大时,一定会用到分页的。一是给用户内容多少的预期,二是可以给浏览者提供一个停顿。如果用户看一篇文章已经翻了十几屏,滚动条还是停留在浏览器中间靠上的位置,那该多绝望。最重要的当然还是分页的跳转功能,如果有600页的内容,昨天看到了300页,现在要301开始看,你敢用下拉加载翻300屏给我看看?
插件信息
说到HTML5和jquery上的分页问题,优秀的分页插件网上一抓一大把,然而同时适合兼容在Ipad和手机端的网站分页却不是特别多。
或许有人会说,触屏现在流行下拉底部后加载下一页内容,类似微博和QQ空间那种模式,分页过时了。或许,阅读到底部后顺手点一下“下一页”和无需操作自动加载内容继续阅读,这小小的一点会给用户带来很不同的微妙感受。
可以肯定的是,当要展示数据量较大时,一定会用到分页的。一是给用户内容多少的预期,二是可以给浏览者提供一个停顿。如果用户看一篇文章已经翻了十几屏,滚动条还是停留在浏览器中间靠上的位置,那该多绝望。最重要的当然还是分页的跳转功能,如果有600页的内容,昨天看到了300页,现在要301开始看,你敢用下拉加载翻300屏给我看看?
插件信息
回到正题,jqPagination 是一个简单易用的轻量级 jquery 分页插件,其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件。此外,它的外观样式是可自定义的,扩展性很强,自带的分页功能包括上一页,下一页,首页,末页和直接跳到某页(中间是输入框)。
实例源码下载:https://git.oschina.net/paincupid/springmvc.git
下载的应用环境:spring STS, jdk1.7,pivotal
下载后的访问地址: http://localhost:8080/springmvc/widget/jqpagination/view
官网: https://beneverard.github.io/jqPagination/
jqPagination.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path;
%>
<html>
<head>
<title>jqpagination用法- author: paincupid since: 2016.01.24</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="<%=basePath%>/resources/css/jqPagination/jqpagination.css"/>
<script type="text/javascript" src="<%=basePath%>/resources/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/js/jqueryForm/jquery.form.js"></script>
<!-- selene theme -->
<script type="text/javascript" src="<%=basePath%>/resources/js/seleneJs/html5.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/js/seleneJs/jquery-ui.min-1.8.16.js"></script>
<link type="text/css" href="<%=basePath%>/resources/css/seleneTheme/css/ui-selene/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<link rel="stylesheet" href="<%=basePath%>/resources/css/seleneTheme/site/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!-- jqPaginator -->
<script type="text/javascript" src="<%=basePath%>/resources/js/jqPagination/jquery.jqpagination.js"></script>
<script type="text/javascript">
$(function(){
$(".buttons").button();
search(1);
$("#search_btn1").click(function () {
search(1);
});
//initPageWidget(data);
});
function search(currentPage){
$("#currentPage").val(currentPage);
$("#searchForm1").ajaxSubmit({
url :'${pageContext.request.contextPath}/formWidget/getForm', //默认是form的action,如果申明,则会覆盖
type : "POST", // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖
dataType : "json", // html(默认)、xml、script、json接受服务器端返回的类型
beforeSubmit : function(){
// 提交前的回调函数,做表单校验用
/* $("#name").val("lee李 - beforeSubmit");
$("#comment").val("呵呵ll123"); */
return true;
},
beforeSerialize: function(){
//提交到Action/Controller时,可以自己对某些值进行处理。
$("#id").val("lele李");
$("#name").val("lee李 - beforeSerialize");
$("#comment").val("呵呵ll123444");
},
success: function(data){
if (data.success == true) {
buildTableData(data);
initPageWidget(data);
}else{
alert("error:"+data.responseText);
}
}
});
}
function buildTableData(data){
var retlist = data.result;
$(".retListTr").remove();
for (var i = 0; i < retlist.length; i++) {
var vo = retlist[i];
var tbodyString = "<tr class = 'retListTr' data-id=" + vo.id +">";
tbodyString = tbodyString + '<td>' + (i + 1) + '</td>'
+ '<td>' + vo.id + '</td>'
+ '<td>' + vo.name + '</td>'
+ '<td>' + vo.age + '</td>'
+ '<td>' + vo.tel + '</td>'
+ '<td>' + vo.prov + '</td>'
+ '<td>' + vo.city + '</td>'
+ '<td>' + vo.town + '</td>'
+ '<td>' + vo.sex + '</td>'
+ '<td>' + vo.location + '</td>'
+ '<td>' + vo.company + '</td>'
+ '<td>' + vo.comment + '</td>';
tbodyString = tbodyString + "</tr>";
$("#retListBody").append($(tbodyString));
}
}
function initPageWidget(data){
var totalCounts = data.totalCounts;
var max = Math.ceil(totalCounts / data.pageSize);
$('.pagination').jqPagination({
link_string : '${pageContext.request.contextPath}/widget/getForm'+'/?page={page_number}',
current_page: 1, //设置当前页 默认为1
max_page : max, //设置最大页 默认为1
page_string : '当前第{current_page}页,共{max_page}页',
paged : function(page) {
search(page);
}
});
}
</script>
</head>
<body>
<div class="container">
<div class="content" >
<div style="padding-left:2%">
<h2>jqpagination用法</h2>
</div>
<form name="searchForm1" id="searchForm1" enctype="multipart/form-data">
<input type="hidden" name="comment" id="comment" value="123" style="width: 800px; height: 400px"/>
<input type="hidden" name="currentPage" id="currentPage"/>
<div class="component" >
<label style="width:24%;">pid</label>
<input id = "id" name="id" class="text" type = "text" value="18600001234"/>
<label style="width:24%;">姓名</label>
<input id = "name" name="name" class="text" type = "text" value="用jqueryFormPlugin的提交"/>
<button id="search_btn1" type="button" class="buttons ui-button-blue">查询提交表单1</button>
</div>
</form>
<div class="space"></div>
<table class="listTable" id = "retListTable" >
<thead>
<tr>
<th scope="col">序号</th>
<th scope="col">id</th>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">电话</th>
<th scope="col">省</th>
<th scope="col">市</th>
<th scope="col">区</th>
<th scope="col">性别</th>
<th scope="col">地点</th>
<th scope="col">公司</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody id = "retListBody" >
</tbody>
</table>
<div style="float:right; padding-right:2%">
<div class="pagination">
<a href="#" class="first" data-action="first">«</a>
<a href="#" class="previous" data-action="previous">‹</a>
<input type="text" readonly="readonly" data-max-page="40" />
<a href="#" class="next" data-action="next">›</a>
<a href="#" class="last" data-action="last">»</a>
</div>
</div>
</div><!-- content end -->
</div><!-- container end -->
</body>
</html>
widgetController.java
package com.paincupid.springmvc.widget.controller;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.paincupid.springmvc.system.domain.UserRole;
import com.paincupid.springmvc.test.domain.Person;
import com.paincupid.springmvc.util.BaseJsonRst;
import com.paincupid.springmvc.util.CreatMockData;
@Controller
@RequestMapping("/widget")
public class widgetController {
private static final Logger log = LoggerFactory.getLogger(widgetController.class);
/**
* 在前台的访问路径为: http://localhost:8080/springmvc/widget/jqpagination/view
* @param person
* @param model
* @return
*/
@RequestMapping("/jqpagination/view")
public String view() {
return "widget/jqPagination";
}
/**
* 请求接收的是一个Java类
* @param person
* @return
*/
@ResponseBody
@RequestMapping(value="/getForm", method=RequestMethod.POST)
public BaseJsonRst<List<Person>> getForm(Person person, @RequestParam("currentPage") int currentPage){
log.info("\r\nid: "+person.getId()+", name: "+person.getName()+", currentPage: "+currentPage);
BaseJsonRst<List<Person>> ret = new BaseJsonRst<List<Person>>();
List<Person> list = CreatMockData.createPersonList(20,currentPage);
ret.setResult(list);
ret.setTotalCounts(250);
ret.setCurrentPage(person.getCurrentPage());
ret.setSuccess(true);
return ret;
}
}
CreatMockData.java
package com.paincupid.springmvc.util;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import com.paincupid.springmvc.system.domain.SystemTree;
import com.paincupid.springmvc.system.domain.UserRole;
import com.paincupid.springmvc.test.domain.Person;
/**
* 模拟数据
* @author arthur.paincupid.lee
* @since 2016.01.24
*
*/
public class CreatMockData {
/**
* person下拉列表,填充id和姓名
* @param numberRow
* @return
*/
public static List<Person> createPersonDropDownList(int numberRow){
List<Person> retlist = new ArrayList<Person>();
for(int i=0; i<numberRow; i++){
Person p = new Person(String.valueOf(i)+"p", GenerateChinaName.generateOneName());
retlist.add(p);
}
return retlist;
}
/**
* mock用户角色下拉提示列表,前3个id不同,但姓名相同。
* @param numberRow
* @return
*/
public static List<UserRole> createUserRole(int numberRow, String mainId){
List<UserRole> retlist = new ArrayList<UserRole>();
String name = GenerateChinaName.generateOneName();
retlist.add(new UserRole("01-"+ mainId, name));
retlist.add(new UserRole("02-"+ mainId, name));
retlist.add(new UserRole("03-"+ mainId, name));
retlist.add(new UserRole("04-"+ mainId, "infosys"));
retlist.add(new UserRole("05-"+ mainId, "infosys"));
retlist.add(new UserRole("06-"+ mainId, "alibaba"));
retlist.add(new UserRole("07-"+ mainId, "tata"));
for(int i=20; i<(20+numberRow); i++){
UserRole u = new UserRole();
u.setId(String.valueOf(i)+ mainId);
u.setName(GenerateChinaName.generateOneName()+"u");
retlist.add(u);
}
return retlist;
}
public static List<Person> createPersonList(int numberRow, int currentPage){
if(numberRow<=20){
numberRow = 20;
}
List<Person> retlist = new ArrayList<Person>();
for(int i=0; i<numberRow; i++){
Person p = new Person();
p.setId(String.valueOf(currentPage));
p.setName(GenerateChinaName.generateOneName());
p.setComment("备注"+i);
if(currentPage%2==0){
p.setSex("女");
}else{
p.setSex("男");
}
p.setAge(createAge());
p.setProv("浙江");
p.setCity("杭州");
p.setTown("余杭区");
p.setLocation("文一西路阿里巴巴");
p.setCompany("google");
if(i<10){
p.setTel("1861111000"+i);
}else if(i>=10 && i<100){
p.setTel("186111100"+i);
}
retlist.add(p);
}
return retlist;
}
public static List<Person> createPersonList(int numberRow){
if(numberRow<=20){
numberRow = 20;
}
List<Person> retlist = new ArrayList<Person>();
for(int i=0; i<numberRow; i++){
Person p = new Person();
p.setId(String.valueOf(i));
p.setName(GenerateChinaName.generateOneName());
p.setComment("备注"+i);
if(i%3==0){
p.setSex("女");
}else{
p.setSex("男");
}
p.setAge(createAge());
p.setProv("浙江");
p.setCity("杭州");
p.setTown("余杭区");
p.setLocation("文一西路阿里巴巴");
p.setCompany("google");
if(i<10){
p.setTel("1861111000"+i);
}else if(i>=10 && i<100){
p.setTel("186111100"+i);
}
retlist.add(p);
}
return retlist;
}
private static int createAge(){
Random rand = new Random();
return rand.nextInt()+1;
}
public static List<SystemTree> mockSystemTreeWithOurUrl(){
List<SystemTree> treelist = new ArrayList<SystemTree>();
SystemTree tree = new SystemTree();
tree.setId("1");
tree.setPid("0");
tree.setName("所有菜单");
tree.setOpen(true);
treelist.add(tree);
tree = new SystemTree();
tree.setId("101");
tree.setPid("1");
tree.setName("最简单的树 -- 标准 JSON 数据");
tree.setFile("person/list");
treelist.add(tree);
tree = new SystemTree();
tree.setId("102");
tree.setPid("1");
tree.setName("json传值");
tree.setFile("json/list");
treelist.add(tree);
tree = new SystemTree();
tree.setId("103");
tree.setPid("1");
tree.setName("jquery.form传java类做参数");
tree.setUrl("jqueryFormPlugin/list");
//tree.setFile("jqueryFormPlugin/list");
treelist.add(tree);
tree = new SystemTree();
tree.setId("104");
tree.setPid("1");
tree.setName("jquery.form用法和样式调整");
tree.setFile("jqueryFormPluginSimple/list");
//tree.setUrl("jqueryFormPluginSimple/list");
treelist.add(tree);
tree = new SystemTree();
tree.setId("105");
tree.setPid("1");
tree.setName("测试所有的Form组件");
tree.setFile("formWidget/view");
treelist.add(tree);
tree = new SystemTree();
tree.setId("105");
tree.setPid("1");
tree.setName("娘子要的树");
tree.setFile("systemTree/wifeTreeInit");
treelist.add(tree);
return treelist;
}
public static List<SystemTree> mockSystemTree(){
Map<String, Object> map = new HashMap<String, Object>();
List<SystemTree> treelist = new ArrayList<SystemTree>();
SystemTree tree = new SystemTree();
tree.setId("1");
tree.setPid("0");
tree.setName("所有菜单");
tree.setOpen(true);
treelist.add(tree);
tree = new SystemTree();
tree.setId("101");
tree.setPid("1");
tree.setName("最简单的树 -- 标准 JSON 数据");
tree.setFile("person/list");
tree.setUrl("person/list");
treelist.add(tree);
tree = new SystemTree();
tree.setId("102");
tree.setPid("1");
tree.setName("json传值");
tree.setFile("json/list");
tree.setUrl("json/list");
treelist.add(tree);
tree = new SystemTree();
tree.setId("103");
tree.setPid("1");
tree.setName("jquery.form传java类做参数");
tree.setFile("jqueryFormPlugin/list");
tree.setUrl("jqueryFormPlugin/list");
treelist.add(tree);
tree = new SystemTree();
tree.setId("104");
tree.setPid("1");
tree.setName("jquery.form用法和样式调整");
tree.setFile("jqueryFormPluginSimple/list");
tree.setUrl("jqueryFormPluginSimple/list");
treelist.add(tree);
return treelist;
}
public static void main(String[] args) {
}
}
转载请注明:http://blog.csdn.net/paincupid/article/details/50574874