在开发的过程中，大量数据的展示大多采用表格的方式，直观，清晰。在这里，我也使用过一些框架bootstrap.table ，dev table ,layui table。本次采用的layui table。用表格展示数据的同时会提供丰富的查询条件去筛选相应的数据。由于大量的数据，一般都会使用分页的形式去查询数据，框架中带有这种功能。
【底部分页栏效果图】
【上方查询栏效果图】
首次进入页面或者页数停留在第一页使用查询栏查询时能够查询到数据。当分页切换到第二页时，再使用查询栏查询，可能查不到数据。（为什么说是可能？后面会给出解释）
在查询提交参数时，添加一个参数 page:1
layui中通过where提交参数 where:{ search:{'user_name':'汪菜菜'},page:1}
注：此方法是通过问题分析，得出的有效方式，如有不对的地方或者有更好的方式欢迎指出
表格有自带的分页功能，后台分页主要是通过传参 {limit:15,page:1} 两个参数来控制分页的分页查询。假设当前有三十条数据，则初始化表格时，显示两页，总数30，页数为1，数据源为1-15条数据。当我们添加查询条件时，假设我通过模糊查询 “汪” 能在 30 条数据中查询到 10 条数据 ，当前页数为第一页，查询的数据进行分页{limit:15,page:1}，10条数据取1-15条之内的，数据源也就是 10 条数据。此时我们把页数切换到第二页时，再通过相同的查询条件去查询，查询数据还是为10条，分页传的参数还是{limit:15,page:2},10条数据取 16-30 之间的数据，然而总数据只有10条，行号在16-30之间无数据，虽然可以看到数据的总数为 10 ，但是没有数据源，前台显示无数据，无数据也就无法初始化下方的分页栏。为了保证能够查询数据，在点击查询按钮时，自动将页数指定为第一页，这是返回无数据才是真正的无数据。
在问题分析中提到，当分页切换到第二页是查询不到数据，那是因为通过模糊查询条件查询的数据只有10条，那么如果查询的数据有超过分页的限制 {limit:15} ，即大于15条（前提是第二页，同理第三页时需要大于30条），是否能够正常查询出所有查询数据？
答案：是的。（这是在测试过程中得出的结论）
【图解】
①这是第一页查询2得出19条数据
②将查询条件去掉，点击到第二页查询到数据图，和直接从上图结果切换到第二页的效果是相同的。
如对本文有疑问，
点击进行留言回复！！
您可能感兴趣的文章:
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
我要评论
网友评论