jQueryDataTables头上有两行:第一行列名和排序,第二行过滤
jQuery DataTables two rows in head: first row column names and sorting, second row filtering
在旧版本的DataTables(高达1.7.?)中,我曾经能够拥有一个具有两行列标题的表,其中排序在第一行完成,并包含列名,使用输入和选择进行过滤在第二行完成。
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td><input type="text" /></td>
<td><select><option ....></select></td>
<td><input type="text" /></td>
</tr>
</thead>
<tbody>...
对于包括最新版本(1.9.0)在内的更高版本,这将不再有效,因为可排序标头将应用于第二行,而不是第一行。
有没有一种方法可以在不使用其他插件的情况下实现这一点,例如http://code.google.com/p/jquery-datatables-column-filter/?
使用
bSortCellsTop
选项,该选项自版本1.8起可用。
为了找到更好的解决方案,我搜索了很多关于这方面的内容,并创建了以下代码。在这里,您可以通过在表头单元格中使用相应的类名来决定组合框和搜索框。排序按钮和列名在第一行,筛选选项在第二行。
<table id="example" width="100%">
<thead>
<tr>
<th>Sıra</th>
<th>SKU</th>
<th>Stok Adı</th>
<th>Ana Kategori</th>
<th>Alt Kategori</th>
<th>Stok Adedi</th>
<th>Alt Limit</th>
<th>Son Giriş Tarihi</th>
<th>Son Giriş Adedi</th>
<th>Stok Yaşı</th>
</tr>
<tr class="filter">
<th class="combo"></th>
<th class="combo"></th>
<th class="combo"></th>
<th class="search"></th>
<th class="search"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>S49996</td>
<td>A4-Tech Q Klavye Siyah Ps2 (KM720)</td>
<td>Ofis Elektroniği</td>
<td>Klavye - Mouse</td>
<td>25</td>
<td>10</td>
<td>10-10-2015</td>
<td>78</td>
<td>89</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"bSortCellsTop": true,
"scrollY": "300px",
"scrollCollapse": true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var columnIndex = this.index();
switch ($(".filter th:eq("+columnIndex+")").attr('class')) {
case 'combo':
var select = $('<select style="width:100%;"><option value=""></option></select>')
.appendTo( $(".filter th:eq("+columnIndex+")").empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
});
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
});
break;
case 'search':
$(".filter th:eq("+columnIndex+")").html( '<input type="text" />' );
$( 'input', $(".filter th:eq("+columnIndex+")") ).on( 'keyup change', function () {
if ( column.search() !== this.value ) {
column
.search( this.value )
.draw();
}
});
break;
}
} );
}
});
});
</script>
相关文章:
- 当我想对redux容器中的数据进行排序或过滤时,我该如何查看它的状态
- AngularJS:使用orderBy进行过滤和排序
- Kendo Grid:如何对绑定到一个简单json对象的列进行排序(和过滤)
- 从 2 个数组进行排序/过滤
- 表过滤,排序,在html中使用jquery/javascript/css进行区分记录
- 如何使用 Ajax Json PHP 和 MySQL 应用排序和过滤
- 如何创建可排序、可过滤和可编辑的 html/javascript 表
- 用于 API 混搭、过滤和排序的在线 etl
- 无法使用角度智能表进行排序/过滤/搜索
- jqGrid使用JsonString JsonReader实现服务器端排序分页过滤
- jQueryDataTables头上有两行:第一行列名和排序,第二行过滤
- AngularJS中的排序、过滤和分页
- 使用Jquery/AJAX/Javascript搜索、排序、分页和过滤DIV
- Jquery,过滤和隐藏元素,如何排序这些"元素到底
- 使用ng-table自定义过滤/排序并选择
- IE9中的ExtJS 5网格过滤和排序中断
- Angular $parse在过滤/排序以整数开头的哈希值时出错
- 用Angular JS的排序和过滤保留砖石效果
- JQuery排序和过滤列表
- 基于某些属性对JSON进行排序/过滤