引入的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"></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>