使用 layui 后端分页的实例

前端代码

<div class="layui-fluid" style="margin: 1em 1em 0em 0em;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12" style="text-align: right">
            <a class="layui-btn" href="/toAddKnowledgePage" target="_blank">写文章</a>
            <div class="layui-inline">
                <input id="searchText"
                       value="$!{title}"
                       class="layui-input"
                       style="border-radius: 10px"
                       autocomplete="on"
                       type='search'
                >
            </div>
            <button id="search-btn" class="layui-btn layui-btn-radius">搜索</button>
        </div>

    </div>
</div>


<div class="layui-fluid" id="LAY-component-timeline">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body" id="layui-card-body">
                    <ul class="layui-timeline">
                        #foreach($e in $feeds)
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">
                                        <img src="https://work.alibaba-inc.com/photo/$e.creator.80x80.jpg"
                                             class="layui-nav-img">
                                        <a href="/knowledge/$e.id" target="_blank" style="color: #469689">$e.title</a>
                                    </h3>
                                    <h5 class="layui-timeline-title">
                                        $!e.creatorNickName
                                        $date.format("yyyy-MM-dd HH:mm:ss",$e.gmtCreate)
                                    </h5>
                                    <textarea class="content" id="answer-${e.id}">
                                        $e.answer
                                    </textarea>
                                </div>
                            </li>
                        #end
                    </ul>

                </div>

                <div class="layui-card-footer" style="text-align: center">
                    <div id="pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .layui-layedit {
        border-width: 0px;
        border-style: solid;
        border-radius: 2px;
    }
</style>

<script src="/assets/layui/layui.all.js"></script>
<script>
    $(function () {

        $('#search-btn').on('click', () => {
            var title = $('#searchText').val()
            location.href = '/?title=' + title;
        });


        layui.use('layedit', function () {
            layedit = layui.layedit;
            #foreach($e in $feeds)
                layedit.build('answer-$e.id', {height: 600, tool:[]});
            #end
        });

        var laypage = layui.laypage
        //完整功能
        laypage.render({
            elem: 'pagination'
            , count: $total //数据总数，从服务端得到
            , limit: $pageSize
            , curr: $pageNum
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    var title = $('#searchText').val()
                    var href = '/?title=' + title;
                    href += '&pageNum=' + obj.curr;
                    href += '&pageSize=' + obj.limit;
                    console.log(href)
                    location.href = href;
                }

            }
        });
    })
</script>

后端 Controller 代码

    @GetMapping("/")
    @VelocityLayout("/velocity/layout/index.vm")
    fun root(@RequestParam(value = "title", required = false) title: String?,
             @RequestParam(value = "pageNum", defaultValue = "1", required = false) pageNum: Int,
             @RequestParam(value = "pageSize", defaultValue = "10", required = false) pageSize: Int,
             model: Model): String {

        model.addAttribute("feeds", KnowledgeService.page(title, pageNum, pageSize).list)
        model.addAttribute("total", KnowledgeService.page(title, pageNum, pageSize).total)
        model.addAttribute("pageNum", pageNum)
        model.addAttribute("pageSize", pageSize)
        model.addAttribute("title", title)
        return "index"
    }




@Service
@Qualifier("KnowledgeServiceImpl")
class KnowledgeServiceImpl : KnowledgeService {
    override fun page(title: String?, currentPage: Int, limit: Int): PageInfo<Knowledge> {
        val orderBy = "id desc"//按照排序: 字段 倒序/排序
        PageHelper.startPage<Knowledge>(currentPage, limit, orderBy)
        val list = search(title)
        return PageInfo(list)
    }

    override fun search(title: String?): MutableList<Knowledge> {
        if (StringUtils.isEmpty(title)) {
            return KnowledgeMapper.listAll()
        } else {
            return KnowledgeMapper.searchByTile(title)
        }
    }

    @Autowired lateinit var KnowledgeMapper: KnowledgeMapper
}



package com.alibaba.microtek.mapper.microtek;

import com.alibaba.microtek.model.microtek.Knowledge;
import org.apache.ibatis.annotations.ResultMap;
import org.apache.ibatis.annotations.Select;
import org.jetbrains.annotations.NotNull;
import org.jetbrains.annotations.Nullable;

import java.util.List;

public interface KnowledgeMapper {
    int deleteByPrimaryKey(Long id);

    int insert(Knowledge record);

    int insertSelective(Knowledge record);

    Knowledge selectByPrimaryKey(Long id);

    int updateByPrimaryKeySelective(Knowledge record);

    int updateByPrimaryKey(Knowledge record);

    @Select("SELECT * FROM knowledge WHERE title = #{title} limit 1")
    @ResultMap("BaseResultMap")
    Knowledge selectByTitle(String title);

    @Select("SELECT * FROM knowledge")
    @ResultMap("BaseResultMap")
    List<Knowledge> listAll();

    @Select("SELECT * FROM knowledge where title like concat('%', #{title}, '%')")
    @ResultMap("BaseResultMap")
    List<Knowledge> searchByTile(String title);

    @Select("SELECT count(*) FROM knowledge WHERE whos = #{url}")
    int countByUrl(String url);
}

效果：

image.png

源代码工程在这里:

https://github.com/KotlinSpringBoot/saber

请不吝您的 Star 哦.