Bootstrap表格动态加载内容和排序功能

所属分类:UI-图表,筛选及排序

 15634  111  查看评论 (12)
Bootstrap表格动态加载内容和排序功能 ie兼容8

安装Bootstrap

我们可以到Bootstrap的官方网站下载Bootstrap的压缩版本,然后引入到我们的项目中,更多细节请参见Bootstrap安装教程,例如下面的代码:

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

Table布局

Bootstrap给table提供多个样式的类,你可按照自己的需要添加,例如我编写的表格:

<table class="table table-striped table-bordered" id="example">
    <tr><td></td></tr>
</table>

当然完整的表格肯定不止上面展示内容那么少,但是我们可以添加更多的内容。

接下来是显示网格:定义为数据表控制元素的网格布局,此前我们曾用“span8”元素来表示半宽度的元素,但随着变化的12列在引导我们只需要改变使用“span6”。所以我们的数据表初始化看起来像:

$(document).ready(function() {
    $('#example').dataTable( {
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
    } );
} );

我们还需要设置一个新的类,以数据表的形式包装元素使元素内联而不是作为一个块(表过滤输入长度选择器是通过这。为此我们只是扩展为DataTable“swrapper”类的选项:

$.extend( $.fn.dataTableExt.oStdClasses, {
    "sWrapper": "dataTables_wrapper form-inline"
} );

Table排序

Bootstrap V2下降支持tablesorter作为表库和结果排序的类已被删除。因此我们需要定义自己的类的造型,我们所能做的一样,我们在做数据表自己的CSS文件(图片中的数据表分布ZIP文件媒体/图像是可用的):

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand;
}
table.table thead .sorting { background: url('images/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; }
table.table thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; }

实际上这里我们使用了一个插件,那就是DataTables。


相关插件-图表,筛选及排序

纯CSS实现自适应布局表格

如何让table元素也能表现出自适应性?按HTML5的说法,table是一个不鼓励使用的HTML标记,但现实工作中,我们避免不了的偶尔会用到它。那么,怎样让一个传统的表格也表现出自适应性呢?
  图表
 11224  67

jquery固定表格头插件fixedheadertable

jquery固定表格头插件fixedheadertable支持固定表头,底部,锁定列,克隆表头到表格底部,自定义表格样式,移动行时样式。
  图表
 12941  45

jquery_html5_图表

jquery_html5_图表
  图表
 11050  42

基于bpmn的流程图插件

bpmn-js 使用 Web 建模工具可以很方便的构建 BPMN 图表,可以把 BPMN 图表嵌入到你的项目中,容易扩展。
  图表
 5824  65

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    子音 0
    2017/5/24 17:04:55
    里边的代码不易改动 回复
    羽歌 0
    2017/3/21 18:05:25

    不是自己写的还收逼 太黑了点 

    回复
    殷彩勇 0
    2017/3/14 12:30:05

    就最后说了一句实话,哈哈

        微尘里de阳光0
        2017/5/24 12:55:41

    回复
    jstest 0
    2017/3/13 23:39:11

    就最后说了一句实话,哈哈

    回复
    逆水行舟 0
    2017/2/27 11:02:56
    AuYeung 0
    2017/2/22 10:05:20

    那不应该收币的啦,免费分享了呗,哈哈

    回复
    蒲鸽 0
    2017/2/21 10:33:11

    说有发邮件  我没币了

    回复
    海那边hnbian 0
    2017/1/10 16:01:33

    那不应该收币的啦,免费分享了呗,哈哈

    回复
    SiriBen 0
    2017/1/8 17:01:00

    那不应该收币的啦,免费分享了呗,哈哈

    回复
    彼岸灯火 0
    2017/1/6 10:01:39

    好厉害的样子,试试看有没有用

    回复
取消回复