最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

h-ui.admin分页工具类的使用

HTML5 admin 浏览 评论

 本h-ui.admin分页工具类后端使用的是java mybatis pagehelper分页插件写的,前端使用laypage分页插件,因为hui-admin框架其实使用的是laypage分页插件。如果是php的话,后端只要有类似根据当前页currentPage和页大小pageSize参数返回总条数total和rows数据的方法,就可以使用本分页工具类来实现分页。

1:写后端分页代码,java后端分页代码如下,这里只展示Controller层的代码,pagehelper相信大家都会,这里不再赘述。

@Controller
public class UserController {
 @Autowired
 private UserService userService;
 @Autowired
 private UserMapper userMapper;
 
 @RequestMapping(value="/user/list",method=RequestMethod.GET)
 @ResponseBody
 public Map<String, Object>findAllByPage(int currPage,int pageSize){
  Map<String, Object> resultMap = new HashMap<String, Object>();
  PageInfo<User> pager = userService.findUserByPage(currPage,pageSize);
  //总条数
  resultMap.put("total", pager.getTotal());
  //获取每页数据
  resultMap.put("rows", pager.getList());
  return resultMap;
  
 }
}

返回的json数据格式如下图所示。

QQ截图20170919123032.png

2:在需要使用h.ui-admin分页的页面加入如下html,包含了所有hui.admin框架的引入,在jquery初始化的时候使用core.getUserListByPage();方法进行分页。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h.ui-admin分页插件案例</title>
<!--引入hui.admin相关css -->
<link rel="stylesheet" type="text/css" href="lib/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="lib/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="lib/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="lib/static/h-ui.admin/css/style.css" />
<script type="text/javascript" src="./lib/jquery/1.9.1/jquery.min.js"></script>
<!--引入laypage相关的js和css -->
<link type="text/css" href="./lib/laypage/1.2/skin/laypage.css">
<script type="text/javascript" src="./lib/laypage/1.2/laypage.js"></script>
<!--引入自定义的hui.admin分页实现core.js -->
<script type="text/javascript" src="./js/core.js"></script>
<style type="text/css">
.pager {
    float: left;
    padding-top: 10px;
}
</style>
</head>
<body>
	<table class="table table-border table-bordered table-bg" style="width: 800px">
	  <thead>
	    <tr class="text-c">
	      <th>ID</th>
		  <th>用户名</th>
		  <th>密码</th>
		  <th>电话</th>
		  <th>地址</th>
		  <th>分数</th>
		  <th>操作</th>
	    </tr>
	  </thead>
	  <tbody id="tbody" class="text-c">
	  </tbody>
	</table>
	<!-- 分页标签 -->
	<div id="page1" class="pager"></div>
</body>
<script type="text/javascript">
$(function(){
	//引入core.js中的方法进行分页
	core.getUserListByPage();
}); 
</script>
</html>

3:实现core.js里面的分页逻辑,我已经写好了,直接引入到需要分页的html页面就可以了。

var core = (function ($) {
    var getRootPath = function() {
        var curWwwPath=window.document.location.href;
        var pathName=window.document.location.pathname;
        var pos=curWwwPath.indexOf(pathName);
        var localhostPaht=curWwwPath.substring(0,pos);
        var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
        return(localhostPaht+projectName);
    };

    /**
     *  分页组件
     */
    var getPage = function (url, config, content) {
        $.getJSON(url, config, function (res) {
            laypage({
                cont: 'page1',
                pages: Math.ceil(res.total / config.pageSize),
                curr: config.page || 1,
                group: 5,
                skip: true,
                jump: function (obj, first) {
                    if (!first) {
                        config.page = obj.curr;
                        getPage(url,config,content);
                    }
                }
            });
            $('#tbody').html(content(res,config.page));
        });
    };

	//返回content数据到页面,currPage便于删除数据时好定位到该类,此处未用
	function parseUserList(res,currPage){
		var content = "";
		$.each(res.rows, function (i, o) {
			content += "<tr>";
			content += "<td>"+o.id+"</td>";
			content += "<td>"+o.username+"</td>";
			content += "<td>"+o.password+"</td>";
			content += "<td>"+o.phone+"</td>";
			content += "<td>"+o.address+"</td>";
			content += "<td>"+o.score+"</td>";
			content += "<td><a>删除</a></td>";
			content += "</tr>";
		});
		return content;
	}
	
	//从后台获取json数据
	var getUserListByPage = function(curr){
		core.getPage(core.getRootPath() + '/user/list',{
			page: curr || 1,
			pageSize: 5
		},parseUserList);
	};
	
    return {
        getRootPath: getRootPath,
        getPage: getPage,
        getUserListByPage:getUserListByPage
    };


})(jQuery);

4:h.ui-admin分页之后效果如图所示。

QQ截图20170919121451.png

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/2017/0919/227.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论