使用layui+mybatis-plus分頁插件實現分頁效果

編寫Controller獲取數據 以json返回

package whm.sys.controller;


import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import whm.commons.DataGridView;
import whm.sys.pojo.SysLoginfo;
import whm.sys.service.SysLoginfoService;
import whm.sys.vo.SysLoginfoVo;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author Alice
 * @since 2020-04-02
 */
@Controller
@RequestMapping("/loginfo")
public class SysLoginfoController {

    @Autowired
    private SysLoginfoService sysLoginfoService;

    /**
     * 實現日志的全查詢
     * @param
     * @return
     */
    @ResponseBody
    @RequestMapping("loadAllLoginfo")
    public DataGridView  loadAllLoginInfo(SysLoginfoVo sysLoginfoVo)
    {

        //傳入分頁的屬性
        IPage<SysLoginfo> page = new Page<>(sysLoginfoVo.getPage(),sysLoginfoVo.getLimit());
        //條件構造器
        QueryWrapper<SysLoginfo> wrapper = new QueryWrapper<>();
        wrapper.like(StringUtils.isNoneBlank(sysLoginfoVo.getLoginname()),"loginnanme",sysLoginfoVo.getLoginname());
        wrapper.like(StringUtils.isNoneBlank(sysLoginfoVo.getLoginip()),"loginip",sysLoginfoVo.getLoginip());
        wrapper.ge(sysLoginfoVo.getStartTime()!=null,"logintime",sysLoginfoVo.getStartTime()!=null);
        wrapper.le(sysLoginfoVo.getEndTime()!=null,"logintime",sysLoginfoVo.getEndTime()!=null);
        wrapper.orderByAsc("logintime");
        sysLoginfoService.page(page, wrapper);
        return  new DataGridView(page.getTotal(),page.getRecords());
    }

}

前端界面引入

<!--分頁表格開始-->
<table class="layui-hide" id="loginfoTable" lay-filter="loginfoTable"></table>
<div id="loginfoToolBar" style="display: none">
    <button type="button" lay-event="batchDelete"  class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius">
        <i class="layui-icon layui-icon-delete"></i>批量刪除
    </button>
</div>

調用js代碼

 

 layui.use(['jquery', 'form', 'layer', 'laydate', 'table'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var table = layui.table;
        //初始化時間選擇器
        laydate.render({
            elem: "#startTime",
            type: "datetime"
        });
        laydate.render({
            elem: "#endTime",
            type: "datetime"
        });

        //初始化表格
        var tableIns = table.render({
            elem: "#loginfoTable",
            title: "日志數據表格",
            url: '/loginfo/loadAllLoginfo',
            toolbar: "#loginfoToolBar",
            page: true,
            height: "full-190",
            cols: [ [
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID', align: 'center'},
                {field: 'loginname', title: '登陸用戶名', align: 'center'},
                {field: 'loginip', title: '登陸IP', align: 'center'},
                {field: 'logintime', title: '登陸時間', align: 'center'},
                {fixed: 'right', title: '操作', toolbar: '#loginfoRowBar', align: 'center'}
            ] ],

　　本項目使用springboot整合開發。需要配置

MyBatisPlusConfig 自動配置類  （核心點）

    // 分頁插件
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return  new PaginationInterceptor();
    }

　　沒錯，你已經寫完了！！！

       下面請上效果圖