开发者日记 - 关于传统分页设计与带搜索集分页设计探讨与实现

先看看传统分页显示设计思路

再看看带搜索集的分页设计思路

总结，带搜索集的分页显示设计思路总体上沿用传统分页设计思路，但由于传统分页进行分页跳转时不需要传递搜索参数，而我们做带搜索集的分页如果直接用传统分页设计的话，除了第一页能正确显示有搜索条件的数据，其他页面均以全集的数据显示，因为在分页跳转时，并没有传递到搜索参数。我们可以通过将第一次form表单提交过来的搜索参数赋值给分页跳转的url中的get传参变量，再将get传参变量赋值回搜索参数。从而达到搜索参数的一个循环传递，直至下一个新的搜索参数出现时则停止。

1.前端form表单设计

2.对广告导航进行有条件显示。即无搜索参数，按钮没触发，get传参为空时显示，否则跳转到搜索结果页面。

3.分页设计代码，详细思路见“带搜索集的分页设计思路？

4.循环输出当前所在页的数据

5.对分页链接判断显示，并给url赋值get传参。

6.高亮显示当前页，用js实现

来看看效果，打开商城网页，不输入关键字，直接点击搜索按钮。

成功跳转到搜索结果页，并正确检测到用户未输入关键字。

尝试输入一个与商品无关的关键字，成功跳转到搜索结果页，并正确检测到无该关键字的商品。

输入”电视“关键字，正确显示分页，并且第一页的链接页用红色标记

点击下一页或者分页链接”2“，正确显示第二页内容，且搜索栏依然保留关键字。

同理，第三页或者末页也能正确显示。

在输入一个新的搜索关键字”手机“，这时，上一个搜索集的循环将结束，进入关键字”手机“的循环传值中。

第一页（首页）

第二页

第三页

第四页

第五页（末页）

演示完毕，下一集将会设计商品详细页或者购物车功能。