| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> 对表格数据的数据筛选 -> 正文阅读 |
|
|
[JavaScript知识库]对表格数据的数据筛选 |
|
对表格的数据的筛选主要的内容其实就是先把数据都查询出来并且显示在页面上,然后页面可以有一个文本框,然后根据文本框输入的内容来查询符合条件的数据。 第一步就是先把数据查询出来,因为数据都是动态的,所以就不可以直接在页面布局上把数据定死。所以这里就用了layui加载表格的的方法来把查询到的数据显示在页面上,如下截图是larui加载表格的方法(更多内容可以访问layui网站)。
如上截图的大概内容就是:先声明两个数据变量-->然后界面加载的时候开始加载数据表格-->“elem”属性是接收数据表格的容器的id值-->“url”属性是查询数据的链接-->“cols”属性就是设置表格的内容(更多内容请看layui网站)-->“page”属性就是开启分页-->“data”属性就是设置一下参数的类型(这里可以写也可以不写)。接下来就是在控制器写查询的方法了,如下面截图。
如上截图大概的意思就是:先查询学院表的数据-->然后对查询到的数据进行统计-->在对数据进行排序(这里用的是倒序的排序方式,OrderByDescending是倒序的意思)-->接下里就是将数据返回到一个表里,然后返回给页面。接下里就是做条件查询的文本框了,也就是所说的搜索的框,如下截图。
如上截图大概的内容就是:在页面放了一个“div”标签,标签里放一个“label”标签和一个“input”标签,然后给一些样式看起来好看一些。接下来就是获取文本框里内容,然后根据内容进行查询,如下面截图所示。
如上截图的大概意思就是:先获取到文本框输入的内容-->根据文本框的内容在控制器里查询-->然后对查询的结果进行表格重载-->这样就可以做到根据输入的内容查询,然后显示符合条件数据(这里有两个渲染表格的方法,看个人喜欢用哪个,当然这两个方法也有一些细微的差别,更多内容可以查看layui网站进行详细的访问)。接下来就是在控制器对文本框输入的内容进行查询了,如下截图。
上面截图的意思也就是说:在原本查询数据的方法里面再对文本框传过来的值进行查询-->然后筛选出符合的数据-->页面再接收到后再显示出符合条件的数据。接下来就是对查询方法的一些修改,如下截图。
如上这张截图就是先注释掉之前的查询数据的链接,然后在下面加入渲染表格的方法,这样就会如果有要文本框查询的数据就会根据文本框的内容去查询并显示符合条件的数据,如果没有就会对数据正常的查询和并且全部显示了,说明数据筛选也就可以出来了!
如上这个截图就是增加了“oninput”属性,这个属性就是当文本框发生改变,它就会触发这个方法,然后,对表格进行变动,上面数据筛选到这里也就可以结束了。 ???????? |
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线(Vue中运用 AntVG6) |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 (一) |
| 前后端分离vue跨域,devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年10日历 | -2025/10/24 21:53:25- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |