javascript - 创建分页 div 列表的更好方法

标签 javascript jquery html css frontend

问题:我需要创建一个“div”列表,其中将包含有关旅馆的信息(个人资料图片、在那里预订房间的按钮和一些简短信息)。该列表将通过对数据库的查询动态创建。该列表应分页,并通过对数据库进行 Ajax 调用仅显示前 n 个旅馆。

我的解决方案:迭代创建模板 div。使用javascript实现分页需求。

我的问题:我发明轮子的解决方案有意义吗?或者我最好使用一些现有的库/框架来实现这一点,如果是的话,我们将不胜感激任何关于现有工具的建议(它可能与主题无关,但未能找到一个单一的库来实现这一点)。

normal table with one column and three rows

table with one column but splitted rows

最佳答案

有很多库可以实现它,我使用的其中一个是

datatables.js

并且工作正常。具有分页、排序搜索等选项。

只是根据您的设计给出一个想法,您可以有一个列表,它可以包含您的 div 模板(数据表提供为您的列定义模板的选项),然后您也可以根据一些定义排序您的字段数据。

它会自动进行分页,但您仍然可以对其进行配置。

它还有搜索功能,所以你可以选择搜索特定的旅馆或价格或任何东西。

关于javascript - 创建分页 div 列表的更好方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37479545/

相关文章:

html - 在不使用 !important 或内联样式表的情况下覆盖 CSS 样式行为

javascript - 了解 JavaScript 评估

javascript - Jquery数据表makeEditable更新无需按回车键

javascript - 使用下拉菜单通过 Ajax 实现动态内容

Jquery:为什么延迟不起作用?

jquery - 查找第一个和最后一个类 JQuery

jquery - 如何根据模型值隐藏 div 元素? MVC

javascript - 如何复制对象并使用现有 Json 对象创建新对象?

javascript - Noty.js - 设置 noty 对象的宽度

javascript - MySQL 根据另一个表中的 ids 数组从一个表中选择值