表格列的方法(自定义、调整大小、重新排序、排序、过滤)和快速搜索



我是一个独立的新手Web开发人员(没有钱,没有帮助,没有教育,没有过期(,从事一个拥有大量数据的广泛个人项目。五个月前开始学习HTML,CSS,JS,jQuery,PHP,MySQL。现在我需要开始开发应该为用户提供数据表的 UI 部分。我真的认为下一个功能至关重要:

  • 列应该可以通过单击它们进行排序(升序-降序(
  • 列的大小应可调整
  • 用户需要能够拖放列以对它们重新排序
  • 用户需要能够通过快速搜索所有列来筛选表
  • 用户需要能够逐列独立地筛选表
  • 用户需要能够选择要显示/隐藏的自定义列
  • 用户需要能够保存/加载视图(表格配置预设 - 列选择、排序、过滤器(

我知道,这是很多。我知道这可能并不容易。但当然,我没有必要从头开始发明自行车。我希望已经实施了一些解决方案。我听说过jQuery的DataTables插件。但我不确定,它似乎只提供了我需要的一些功能。我不知道其他的是否兼容或更好,甚至存在。因此,我谦虚地征求建议,考虑我应该采取的方向和方法。如果我需要几个月的时间来实施我需要的一切(我确实有时间(,那也没关系。但我想确保我走对了路,最终结果是可用的。

使用数据表。 默认附加:(使用 jquery 和 bootstrap CDN ( 附加数据表 CSS 和 JS CDN .. 创建一个表标签并给出表ID ..

$("#tableid"(。数据表( { dom: 'Bfrtip', 按钮:[ "复制"、"CSV"、"Excel"、"PDF"、"打印" ], 响应式:真, scrollX:true, 滚动Y:真, } );放置此脚本...就是这样。。。带有过滤器条目的表格,分页,响应式,滚动,导出到Excel,pdf现在可以工作...还有更多功能。转到数据表网站和练习示例...表简化....

最多需要半小时才能完成,包括日期范围过滤器....

请参考YouTube上的WebSlesson Tutorial...近 240 个迷你项目可供 Web 开发人员使用 ...您将在一个月内成为专家。所有 D 最佳

最新更新