使用layui分页

html页面

<div class="page-right">
        <div class="nytit">$!params.WZLX_NAME</div>
        <ul class="newslist ny" id="list">
        //分页的数据显示在这
        </ul>
        <div class="tcdPageCode" id="tcdPageCode" lay-event="tcdPageCode"></div>
    </div>

JS代码

<script>
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage;
        page(1, 5);
        laypage.render({
            elem: 'tcdPageCode'
            , count: 70 //总数
            , limit: 5  //条数
            , curr: 1   //起始页
            , jump: function (obj, first) {
                console.log(obj.curr);
                if (!first) {
                    page(obj.curr, obj.limit);
                }
            }
        });
    });
    function page(curr, limit) {
        layui.$.ajax({
            type: "get",
            async: false,	//同步请求，true是异步请求
            url: "$base/web/showlistPage.do",
            data: {"startIndex": ((curr - 1) * 5) + 1, "endIndex": (curr * 5)}, //传到后台的数据
            dataType: "json",			//返回的数据格式
            success: function (data) {		//url执行成功后会返回到这里，data返回的数据
                console.log(data);			//控制台输出data的数据内容
                for (let item = 0; item < data.length; item++) {
                    $("#list").append(
                        '<li><a href="$base/web/showInfo.do?WZID={0}">{1}</a><span>{2}</span></li>'.format( data[item].WZID, data[item].WZ_NAME, data[item].GKSJ));
                        //format这个是单独在另外的js里写的，可以换个方式放数据
                }
            },
            error: function () {   //报错会执行这个方法
                alert("22");
            }
        })
    }
</script>

后台代码

 public Object showlistPage() {
        VelocityContext vc = new VelocityContext();
        Map<String, Object> params = this.getRequestParameters();
        params.put("STATE", "1");
        params.put("WZLX", "2");
        params.put("WZLX_NAME", "公示公告");
        List<Map> newData = new ArrayList<>();
        //数据库操作用try...catch...包起来，知道报错在哪，以免爆炸
        try {
            List<Map> data = PimDao.newInstance().selectList("T_WEB_WZ.selectlist", params);
            if (data != null) {            	//数组给数组赋值前，判断是不是为空，
                newData = getNewList(data);		//因为data里面有值为null或java.sql.date，会报错(java.lang.NullPointerException)，所以转成string类型,
            }
        } catch (Exception a) {
            a.printStackTrace();
        }
        return View.toJson(newData);    //返回json数据，因为前端接收的数据类型是json，否则会报错
    }


    /**
     * 处理map中的null和java.sql.data类型数据
     * @param list
     * @return
     */
    private List<Map> getNewList(List<Map> list) {
        List<Map> result = new ArrayList<Map>();
        if (!list.isEmpty() && list.size() > 0) {
            Date date = new Date();
            for (Map map : list) {
                Map<String, String> tempMap = new HashMap<String, String>();
                for (Iterator i = map.keySet().iterator(); i.hasNext(); ) {
                    String key = (String) i.next();
                    if (map.get(key) == null) {
                        tempMap.put(key, "");
                    } else {
                        tempMap.put(key, map.get(key).toString().equals("") ? "" : map.get(key).toString());
                    }
                }
                result.add(tempMap);
            }
        }
        return result;
    }