bootstrap——完美的分页查询
本文共 1868 字，大约阅读时间需要 6 分钟。
最近，开始我们的Java项目，要求尽量使用bootstrap，因为它比easyUI要好看的多。然后就开始上网查，边查边做，虽然我们引入了一些bootstrap的样式，但是并没有js代码，所有的功能都需要自己用js做。其实并不难，只要我们明白分页的实质就行。说了这么多，就让我们看看分页查询的表格是怎么做出来的吧。
1、引入的css样式
我们需要引入bootstrap自带的表格样式，这样比较好看，如果再需要修改的话，我们就在其基础上再改。
2、需要的HTML文本
这里需要注意的是，每一个标签的id和class名字不要乱改，因为它对应着一些js代码和css样式。如果没有显示出效果，或者显示的效果不是自己想要的，我们可以适当进行微调。
学生违纪信息 <%-- <%@ include file="/common.jsp"%> --%> <%@ include file="/bootstrap.jsp"%>学生违纪信息
学号 姓名 考试科目 考场号 班级 监考人员
3、相应的js代码
这里包含了模糊查询事件，回车事件，上一步，下一步，选择页，选择每页显示条数等常用功能，后期再补充排序和选择列的显示和隐藏等。
4、效果图
5、总结
经过这些天的努力，实现了最基本的分页查询功能，还包括上一页、下一页以及选择跳页的效果，而且可以进行模糊查询，而且如果记录小于5条就不会产生分页等。后期再加上排序，选择列的显示和影藏就更好了。我们需要做的还很多，只要我们努力，就一定能够做到。
你可能感兴趣的文章
arm-linux之bootmem分配器
查看>>
Java中数组、List、Set、Map相互转换
查看>>
java读取Excel时对单元格cell时间格式的判断
查看>>
IDEA git 忽略文件的几种方式
查看>>
本地管理多个git账号
查看>>
Swagger Warn:AbstractSerializableParameter Illegal DefaultValue for parameter type integer
查看>>
SpringBoot项目使用Swagger2搭建Restful API在线文档的简单应用
查看>>
Swagger2中@ApiImplicitParam注解paramType属性使用的注意事项
查看>>
IDEA中MyBatis Log Plugin的使用
查看>>
Markdown中图片保存以及hexo网页不显示图片问题
查看>>
使用GitHub做图床的三款工具
查看>>
搭建hexo博客之valine报错问题
查看>>
IDEA中Java代码规范与质量检测插件
查看>>
DOClever的安装及使用
查看>>
hexo博客参考链接
查看>>
isEmpty和isBlank区别
查看>>
swagger2UI之swagger-bootstrap-ui的Authorize 功能
查看>>
Push rejected: spider-man: push to origin/master was rejected
查看>>
Failed to retrieve application JMX service URL
查看>>
Swagger中@ApiIgnore注解的使用
查看>>