vue+laypage实现条件查询

约定不等于承诺〃 2024-04-17 06:00 50阅读 0赞

# 引入的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>

发表评论取消回复

表情：

评论列表（有 0 条评论，50人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+laypage实现条件查询

引入的js <script type="text/javascript" src="UI/layui/layui.js" th:src="@{/layui/l...

约定不等于承诺〃/ 2024年04月17日 06:00/ 0 赞/ 51 阅读

相关条件查询

（1）关键字and or > < = >= <= between ....and not between...and select sname--查

忘是亡心i/ 2023年08月17日 16:09/ 0 赞/ 57 阅读

相关 WPF实现条件查询

> WPF：（Window Presentation > Foundation），基于Window的用户界面框架，提供了统一的编程模型、语言和框架，真正做到了分离界面设计人

叁歲伎倆/ 2023年01月22日 01:54/ 0 赞/ 63 阅读

相关 mysql多条件模糊查询语句_实现多条件模糊查询SQL语句

很多网友问到如何写模糊查询语句和多条件查询，这里我整理了一下，假设以姓名、性别、电话号...作为数据库中的字段名。通常写一个简单的模糊查询的SQL语句格式可以如下例： s

r囧r小猫/ 2023年01月12日 04:09/ 0 赞/ 427 阅读

相关 MyBatis-Plus查询：批量、条件、分页查询的实现

> MyBatis-Plus在MyBatis的基础上只做增强，不做改变，目的是为了`简化开发，提高效率`。本专栏六篇文章围绕MyBatis-Plus的常用技术点，结合sprin

悠悠/ 2022年11月15日 14:10/ 0 赞/ 701 阅读

相关 mybatis-plus 实现多条件映射关系查询（范围查询）

1. 案例效果图根据时间、人均花费、出行天数查询 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

ゝ一世哀愁。/ 2022年10月19日 14:57/ 0 赞/ 43 阅读

相关 HBase条件查询（多条件查询）

Author：Pirate Leo myBlog: [http://blog.csdn.net/pirateleo/][http_blog.csdn.net_pirat

以你之姓@/ 2022年08月26日 00:53/ 0 赞/ 1407 阅读

相关前后端分离实现条件查询结果

【前言】前后端分离，前端是用的angular框架，后端用的是SSM框架加上一些工具类。【过程】这次要做的功能是根据时间和学生姓名的条件来查询数据库中的信息。这篇文章

谁践踏了优雅/ 2022年05月25日 00:50/ 0 赞/ 176 阅读

相关 Mybatis实现条件查询

配置文件 <select id="search" parameterType="per.czt.ssm.domain.User" resultMap="u

灰太狼/ 2022年03月01日 00:54/ 0 赞/ 349 阅读

相关 Mysql查询---条件查询

条件查询支持的运算符：运算符说明 = 等于 <>或者!= 不等于 < 小于 <= 小于等于 > 大于

深藏阁楼爱情的钟/ 2022年02月13日 06:37/ 0 赞/ 464 阅读