微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

bootstrap table使用入门基本用法

笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网。但是对于某部分技术人员来说,入门还是不够详细,故有了下列的文章。希望我的文章能给大家带来帮助。

bootstrap-table作为常用的TABLE显示控件,会经常出现在各位的项目当中。

使用步骤如下:

第一步:

下载bootstrap-table需要使用的文件包括Css and js文件

官方网址 nofollow" href="http://bootstrap-table.wenzhixin.net.cn/">http://bootstrap-table.wenzhixin.net.cn/

下载后解压后可以看到如下目录格式

dist/ │ ├── extensions/ │ ├── locale/ │ ├── bootstrap-table.min.css │ └── bootstrap-table.min.js ├── docs/ └── src/ ├── extensions/ ├── locale/ ├── bootstrap-table.css └── bootstrap-table.js

第二步:

在html页面或者其他页面添加如下CSS 和JS的标签

注意:CSS文件和JS文件在下载文件夹中均可以找到

rush:xhtml;">
rush:xhtml;">

最好的做法,是自己定义好CSS和JS摆放的位置,例如在你根目录下建立bootstrap-table文件夹,里面再分css和js文件夹,将文件copy到对应的目录

第三步:

放入table 的标签

rush:xhtml;">

第四步:

编写js代码

rush:js;">

第五步:

编写数据来源文件

该例子是直接使用json文件来实现数据来源,其实大家可以使用其他编程语言,例如PHP jsp等等来实现json的输出

data1.json文件内容如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐