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

2024-02-04 11:43•JavaScript•阅读 3797

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

<linkhref="bootstrap/css/bootstrap.min.css"rel="stylesheet">

<scriptsrc="jquery.min.js"></script>

<scriptsrc="bootstrap/js/bootstrap.min.js"></script>

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

<tableclass="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"

} );

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

http://www.jq22.com/yanshi11321