vue+laypage实现条件查询

引入的js

<script type="text/javascript" src="UI/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" src="vue/vue.js" th:src="@{/vue/vue.js}"></script>
<script type="text/javascript" src="jquery/jquery-2.1.1.min.js" th:src="@{/jquery/jquery-2.1.1.min.js}"></script>

html

<input type="text"  id="searchInput" class="layui-input searchVal" placeholder="请输入搜索的内容"  style="border-radius: 0 8px 8px 0; ">
<button type="button" class="layui-btn layui-bg-black" style="border-radius: 9px;" id="searchBtn"  onclick="search()">搜索</button>
<!--分页组件容器-->
<div id="demo" style="text-align: center;"></div>

<div class="alumniDetail" v-for="alumni in alumniList" :key="alumni.id">
						<span style="position: relative;left: -50%;" class="layui-badge-rim"><span class="layui-badge-dot" style="margin-right: 5px;"></span>知名校友</span>
						<i class="layui-icon" style="position: relative;right: -50%;color: #FF5722">&#xe756;</i>
						<div class="photo"><img :src="(alumni.img!=null)?alumni.img:'/my/img/IMG_3494.JPG'"></div>
						<div class="name"><span v-text="alumni.name+'/'+alumni.sex"></span></div>
						<div class="zfj"><i class="icon"><img src="../替换文件/shooting-star.png" th:src="@{/my/img/shooting-star.png}"></i></div>
					</div>

js代码

<script type="text/javascript">


	var vm = new Vue({
		el:'#app'
		,data:{
			alumniList:[]
		}
	});


	var pageIndex = 1;
	var pageSize = 4;
	var totalCount = 0;

	window.onload = function (){
		getInfo();  // 获取数据
		toPage();   // 进行分页
	}


	function getInfo() {
		//查询条件
		var param = {
			page: pageIndex,
			limit: pageSize,
			//其它查询条件可在下面添加
			queryText:$('.searchVal').val()//搜索值
		};
		$.ajax({
			type: 'POST',
			url: '/alumni/queryAlumniList',
			dataType: 'json',
			data: param,
			async: false,//这里设置为同步执行，目的是等数据加载完再调用layui分页组件，不然分页组件拿不到totalCount的值
			success: function (result) {
				vm.alumniList = result.data;
				totalCount = result.count;
			}
		});
	}

	function toPage(){
		layui.use('laypage',function(){
			var laypage = layui.laypage;
			laypage.render({
				elem:'demo'
				,limit:4
				,theme:'#393D49'
				,count: totalCount,
				jump: function(obj, first){
					if(!first){
						pageIndex = obj.curr;
						pageSize = obj.limit;
						getInfo();
					}
				}
			})
		});

	}

	//搜索按钮
	function search(){
		pageIndex = 1;
		pageSize = 4;
		getInfo();  // 获取数据
		toPage();   // 进行分页
	};

	//回车搜索
	$("#searchInput").on('keypress',function(){
		if (event.keyCode ==13) {
			//阻止事件冒泡
			event.preventDefault();
			$('#searchBtn').trigger('click');
		}
	});


</script>