我如何使表能够与Twitter Bootstrap排序？ [英] How can I make table being capable of sorting with Twitter Bootstrap?

问题描述

我想知道如何使我的表能够与Twitter Bootstrap排序？

I want to know how can I make my table being capable of sorting with Twitter Bootstrap? What are the things to be considered?

推荐答案

您需要使用jQuery和dataTable.js。

You need to use jQuery and dataTable.js.

让我们看一个例子：

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">

显示网格：为DataTable控件元素定义网格布局，以前我们使用span8元素来表示半宽元素，但是在Bootstrap中更改为12列，我们只需要更改为使用span6。所以我们的DataTable初始化看起来像：

Display grid: to define the grid layout for the DataTables control elements, previously we had used "span8" elements to denote half width elements, but with the change to 12 columns in Bootstrap we just need to change to using "span6". So our DataTables initialisation looks like:

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

我们还需要在DataTable包装器元素上设置一个新类，为了这样做，我们简单地扩展DataTable的sWrapper类选项：

We also need to set a new class on the DataTables wrapper element in order to make the form elements appear inline rather than as a block (the table filtering input and length selector are effected by this. To do this we simply extend the "sWrapper" class option for the DataTable:

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

排序
Bootstrap v2已将TableSorter的支持删除为表库，因此排除类已删除。这样我们需要定义我们自己的排序样式，我们可以使用与DataTables自己的CSS文件完全相同的方式（媒体/图片中的DataTables发布zip文件中提供的图片）：

Sorting Bootstrap v2 has dropped support for TableSorter as a table library and as a result the sorting classes have been removed. As such we need to define our own sort styling, which we can do in exactly the same way as we do in DataTables' own CSS files (the images are available in the DataTables distribution zip file in media/images):

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; }

整理
最后有两个修改我的集成CSS从1.4文件到完成我们的样式：

Tidy up Finally there are two modifications to my integration CSS from the 1.4 file to complete our styling:

从dataTables_length和dataTables_filter类中删除宽度。 Bootstrap中的更新意味着不再需要这些更新。
我以前的表类有margin：1em 0;但是随着改变，视觉流现在更好与margin-bottom：6px！important;

Remove the width from the dataTables_length and dataTables_filter classes. The updates in Bootstrap mean that these are no longer needed. The table class I had before had "margin: 1em 0;" but witht he changes, the visual flow is now better with "margin-bottom: 6px !important;"

检查此参考

这篇关于我如何使表能够与Twitter Bootstrap排序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！