欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 其它代码

bootstrap简洁扁平的表格

所属栏目:其它代码更新时间:2016-07-14原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


特点

  • 基于Bootstrap 3开发(同时支持 Bootstrap 2)

  • 响应式界面

  • 固定表头

  • 完全可配置

  • 支持data属性

  • 显示/隐藏列

  • 显示/隐藏表头

  • 使用AJAX获取JSON数据

  • 点击表头可简单的进行排序

  • 支持自定义列显示

  • 支持单/复选

  • 强大的分页功能

  • 支持名片布局

  • 支持多语言

使用方法

1、在html页面的head标签中引入Bootstrap库(假如你的项目还没使用)和bootstrap-table.css。

<link rel="stylesheet" href="bootstrap.min.css">         
<link rel="stylesheet" href="bootstrap-table.css">

2、在head标签或者在body标签闭合前(比较推荐)引入jQuery库和Bootstrap库(假如你的项目还没使用)和bootstrap-table.js。

<script src="jquery.min.js"></script>         
<script src="bootstrap.min.js"></script>         
<script src="bootstrap-table.js"></script>

3、指定数据源,这里有两种方式

 1)通过data属性标签

 在一个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
             <thead>
                ...
             </thead>
</table>

2)通过JavaScript设置数据源

通过JavaScript来启用带有id属性的Table。

$('#table').bootstrapTable({
           url: 'data.json'          
          });

关于参数请参照官网的文档

具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS动态五星评分插件代码

2淘宝商品jQuery列表多条件查询特效代码

3兼容所有浏览器的设为首页收藏本站js代码

4JS实现文字替换成图片或者其它内容

5js实现网页多个div定时轮流显示的代码

6IE6旧版浏览器提示升级代码模板下载

7SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

8后台登录jquery网页全屏背景图片自动切换代码

9百度404页面JS倒计时返回页面代码

10jQuery公司大事记、历程时间轴专用代码

最新更新的

1JS点击显示内容再点击隐藏

2JS点击加大/减小字号的代码

3jQuery点击展开与收缩查看更多效果代码

4JqueryPagination分页插件

5一款漂亮方便调用的jQuery前端分页

6JS返回上一页/返回上一页并刷新

7百度404页面JS倒计时返回页面代码

8JS赋值给指定元素的父级元素

9JS实现301跳转的JS代码

10JS拆分文本再组合