Bootstrap表格动态加载内容和排序功能
Bootstrap 动态 加载 内容 表格 排序功能
2023-09-14 09:01:10 时间
安装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