浅尝 bootstrap-table

今天给大家分享一个十分有趣的js插件,bootstrap-table --- 基于 bootstrap 样式的table插件

官网: bootstrap-table参考文档

首先说说为什么要使用这款插件,以及者款插件适用的场景(个人观点)

首先我们在日常适用table元素的时候会遇上以下几个问题

1.数据分页

2.表头固定

3.数据统计

4.排序

......等等

我曾经试过自己写css和js来实现这些功能,首先不说好不好看,当当实现起来就已经花费了我大量的时候,而且还没有得到好的回报。

终于苦苦找寻下终于找到这款插件:


基于bootstrap-table开发的表格

上面的表格实现全表格搜索各个字段排序,点击单选,支持多选,分页。

而我只是进行了简单的配置,话不多说,直接上代码(好奇,简书上不了代码啊)。



html


css


js

刚开始写好是没有数据的,需要从服务器上获取数据使用 : $("#file-table").bootstrapTable("load",res); 其中res是从服务器获取的json数据

仅做记录,方便以后使用时能快速回忆起来。 也强力推荐给大家。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,113评论 8 183
  • 在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足...
    伍华聪_开发框架阅读 2,464评论 0 52
  • 他们说今天很热 他们的手机里高温预警已到达红色 他们在空调房里调情乱摸 他们午饭过后上山下坡 我不觉很热 想想丈母...
    谯夫阅读 306评论 0 1
  • 投资自己的身体,让自己有一个健康的身体,才能将家庭和亲人照顾好;投资自己的头脑,学习更多的知识技能,才能将孩子教育...
    娇之语阅读 250评论 0 0
  • 前两年住在一楼,偶然间发现单元门口每天都会有只小狗在门前张望,起初也没在意,突然想起来前两天楼上有一户人家搬家了,...
    墨_Lu阅读 329评论 3 1