Layui使用vue 拓展分页只需查出 所有数据 自动分页

css 添加

<style> 
		.news_search{ padding:10px 10px; };
		.layui-table,.layui-table th{ text-align:center; }
		.news_list .layui-form-switch{ margin-top:0; }
	</style>

这个是table 表格

<div id="tabBank">
    <div class="layui-form news_list">
        <table class="layui-table">
            <colgroup>
                <col width="70">
				<col>
                <col>
                <col width="9%">
                <col width="9%">
                <col width="9%">
                <col width="9%">
                <col width="9%">
                <col width="15%">
            </colgroup>
            <thead>
            <tr>
                <th>序号</th>
				<th>ID</th>
                <th>持有人</th>
                <th>银行名称</th>
                <th>银行卡状态</th>
                <th>办理地点</th>
                <th>类型</th>
                <th>等级</th>
                <th>银行预留电话</th>
                <th>余额</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="news_content">
            <tr v-for="(dat,index,key) in data">
                <td><input type="checkbox" name="checked" lay-skin="primary" lay-filter="choose">{{index+1}}</td>
				<td>{{dat.id}}</td>
                <td>{{dat.userinfo.userName}}</td>
                <td>{{dat.banckName}}</td>
                <template v-if="dat.banckStaus == '1'">
                    <td><p style="color: red">挂失</p></td>
                </template>
                <template v-else>
                    <td>正常</td>
                </template>
                <td>{{dat.banckAddress}}</td>
                <td>{{dat.banckType}}</td>
                <td>{{dat.banckLevel}}</td>
                <td>{{dat.banckModile}}</td>
                <td>{{dat.banckBanlance}}</td>
                <td><button class="layui-btn layui-btn-danger" @click="">删除</button></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="page" style="text-align: center">
        <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-0">
			<template v-for="(dp,index,key) in dataPage">
				<template v-if="dp == dataIndex"><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>{{dp}}</em></span>
				</template>
				<template v-else><a href="javascript:;" @click="tabPage(index+1)">{{dp}}</a></template>
			</template>
        </div>
    </div>
</div>

这里是js 只需要更换post 接口

<script type="text/javascript">


    $(function () {
        var allDat;
        var len;
        allDat = new Vue({
            el: '#tabBank',
            data: {
                'data': '', // 数据
				'dataSize':'', // 总数
				'dataPage':'' ,// 总页数
				'dataPageSize':10, // 一页多少
				'dataIndex':'1', //当前页
				'allData':''
            }, mounted() {
                $.post("/bankCardController/shoAllPage", function (data_json) {
                    allDat.data = data_json.data.slice(0,allDat.dataPageSize);
                    allDat.dataSize = data_json.data.length;
                    allDat.dataPage = sumPageSize(data_json.data.length,allDat.dataPageSize);
					allDat.allData = data_json.data;
                })
            },methods:{
            	tabPage:function(index){
					var pageOldSize = (index-1)*allDat.dataPageSize;
					debugger

					if(index <= 1){
						pageOldSize =  0;
					}
					console.log(pageOldSize);
					var oldPageSize = allDat.dataPageSize;
					var pageInSplic = pageOldSize + oldPageSize; // 上页的数量 + 一页容量
					if(pageInSplic >= allDat.dataSize){  // 如果下页大于 总页数  就直接等于总页数
						pageInSplic = allDat.dataSize;
					}
					var ary = new Array();
					for(pageOldSize ; pageOldSize < pageInSplic ; pageOldSize ++){
						ary.push(allDat.allData[pageOldSize]);
						if(pageOldSize == pageOldSize.length){
							pageOldSize= 0 ;
							return;
						}
					}
					allDat.data = ary;
					allDat.dataIndex = index;
				}
			}
        })
    })
	
	function sumPageSize(dataSize,dataPageSize) {
    	var num =  dataSize % dataPageSize;
		if(num == 0 ){
			return parseInt(dataSize/dataPageSize);
		}else{
			return parseInt(dataSize/dataPageSize+1);
		}
    }
</script>

这个是后台接口 我用的Jpa 只需要finall查询出List集合 以后模糊查询只需要传参就好

@RequestMapping("/shoAllPage")
    @ResponseBody
    public AjaxResult showAllPage(){
        return AjaxUtils.process(new Func_T<Object>() {
            @Override
            public Object invoke() throws Exception {
                return
                bankCardRepository.findAll(new Sort(Sort.Direction.ASC,"id"));
            }
        });
    }