大神案例 :http://www.tpyyes.com/a/javaweb/2017/0830/196.html
我在实现自己需要的功能之前借鉴了大神给出的例子 大神的案例采用了ssm框架(spring+mybatis+springmvc)搭建,后端使用了pageHelper分页插件,前端采用layui官网的laypage分页插件。需要的朋友可以去查看详情。
我使用的框架是jfinal 3.0 详情可以查看 http://www.jfinal.com/
jsp页面代码 :
引入js:<script src="<%=request.getContextPath()%>/layui/layui.all.js"></script>
<script src="<%=request.getContextPath()%>/layui/layui.js"></script>
<script type="text/javascript" src="../../layui/lay/modules/laypage.js"></script>
这两个都需要引入 我这里只引入一个会报错
引入css: <link href="<%=request.getContextPath()%>/layui/css/layui.css" rel="stylesheet" />
在jsp的body中定义
<table class="layui-table" lay-data="{id: 'idTest'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">序号</th>
<th lay-data="{field:'title', width:120, sort: true, edit: 'text'}">标题</th>
<th lay-data="{field:'content', width:150, edit: 'text'}">内容</th>
<th lay-data="{field:'time', width:80, edit: 'text'}">时间</th>
<th lay-data="{field:'type', width:100, edit: 'text'}">类型</th>
<th lay-data="{ width:100, edit: 'text'}">操作</th>
</tr>
</thead>
<tbody id="tb"></tbody>
</table>
<div id="test1"></div>
js代码:
<script type="text/javascript">
layui.use('laypage', function(){
var laypage = layui.laypage;
var url = "这里写你自己请求数据的url"; /项目名/controller/method
var config = {page:1;pageSize:15} 当pagesize为10 可以不要这个参数 当pagesize为15时需要这个参数
$.getJSON(url,config,function(res){
laypage.render({
elem: 'test1',
count: res.records, //总条数
limit:config.pageSize, //每页条数
theme: '#00AADB', //自定义颜色
skip: true,
layout: ['prev', 'page', 'next', 'skip'],
jump: function(obj, first){
if(!first){ //首次则不进入
config.page = obj.curr;
getUserListByPage(url,config);
}
}
});
parseUserList(res,config.page);
});
});
//点击页数从后台获取数据
function getUserListByPage(url,config){
$.getJSON(url,config,function(res){
parseUserList(res,config.page);
});
}
//解析数据,currPage参数为预留参数,当删除一行刷新列表时,可以记住当前页而不至于显示到首页去
function parseUserList(res,currPage){
var content = "";
debugger;
$.each(res.rows, function (i, o) {
content += "<tr>";
content += "<td>"+(++i)+"</td>";
content += "<td><div class='Con'>"+o.title+"</div></td>";
content += "<td><div class='Con'>"+o.content+"</div></td>";
content += "<td>"+o.time+"</td>";
content += "<td>"+o.type+"</td>";
content += "<td class='WIDTH'><a class="+"BUTTON"+" href="+"javascript:method("+o.id+");"+">查看 </a> <a class="+"BUTTON"+" href="+"javascript:method("+o.id+");"+">编辑 </a> <a class="+"BUTTON"+" href="+"javascript:method("+o.id+");"+">删除</a>"+"</td>";
content += "</tr>";
});
$('#tb').html(content);
}
java代码
public void listFyxx(){
//Page<Fyxx> rows= Fyxx.dao.paginate(pageNumber, pageSize, select, sqlExceptSelect)
//pagenumber 第几页
//pageSize 一页几条数据
System.out.println(getParaToInt("page"));
Page<Fyxx> rows = Fyxx.dao.paginate(getParaToInt("page", 1), 10,
"select *", "from m_fyxx order by time desc");
Map root = new HashMap();
String ip = new IpUtil().getIP();
root.put("total", rows.getTotalPage());
root.put("page", rows.getPageNumber());
root.put("records", rows.getTotalRow());
root.put("rows", rows.getList());
renderJson(JsonKit.toJson(root));
}
写到这里jfinal和layui结合使用的分页功能就完成了。自己也是第一次用 ,在这里写一篇博客记录一下
再次感觉大神们给出的案例
/mltpap/fyxx/listFyxx;