jfinal结合layui分页插件进行页面数据展示

大神案例 ：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>&nbsp;&nbsp;&nbsp;&nbsp;<a class="+"BUTTON"+" href="+"javascript:method("+o.id+");"+">编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;<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；