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

安装Bootstrap

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

1 2 3

<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提供多个样式的类，你可按照自己的需要添加，例如我编写的表格：

1 2 3

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

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

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

1 2 3 4 5

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

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

1 2 3

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

http://www.jq22.com/jquery-info11321

http://www.jq22.com/yanshi11321