jqpagination动态赋值实例

最新推荐文章于 2022-04-07 10:39:57 发布

arthur.dy.lee

最新推荐文章于 2022-04-07 10:39:57 发布

阅读量5.9k

点赞数

分类专栏： jquery 文章标签： jqpagination

本文链接：https://blog.csdn.net/paincupid/article/details/50574874

版权

jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

    加载与分页
   说到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) {

	}

}