浅尝 bootstrap-table

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

官网: bootstrap-table参考文档

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

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

1.数据分页

2.表头固定

3.数据统计

4.排序

......等等

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

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


浅尝 bootstrap-table_第1张图片
基于bootstrap-table开发的表格

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

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



浅尝 bootstrap-table_第2张图片
html


css


浅尝 bootstrap-table_第3张图片
js

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

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

你可能感兴趣的:(浅尝 bootstrap-table)