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

Better way to create a paginated list of divs

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

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

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

normal table with one column and three rows

table with one column but splitted rows

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

datatables.js

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

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

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

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