修复了数据表中的行排序
Fixed rows sorting in datatables
我想在数据表的头部建立一些固定的行。
这是我的数据表设置:
var oTable = $('#transactions').dataTable( {
"aaSorting": [ [0,'desc'] ],
"bFilter": false,
"bSort": true,
"aaSorting": [[3,'desc']], // default search colums
// "aaSortingFixed": [[3,'desc']],
"bPaginate": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"asStripeClasses": [ 'monitoring-table-new' ],
"bAutoWidth": false,
"aoColumns": [
{ "sType": "custom",
"sClass": "td-date-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="date"><em>' + sVal + '</em></span></div></div>';
}
},
{ "sType": "custom",
"sClass": "td-transaction-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="transaction"><em>' + sVal + '</em></span></div></div>';
}
},
{ "sType": "custom",
"sClass": "td-client-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="client"><div>' + sVal + '</div></span></div></div>';
}
},
{ "sType": "custom",
"sClass": "td-value-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="value"><em>' + sVal + '</em></span></div></div>';
}
},
{ "sType": "custom",
"sClass": "td-status-size-cell",
"fnRender": function ( oObj, sVal ) {
return '<div class="monitoring-head-new leadencolor"><div class="form-border"><span class="status"><div>' + sVal + '</div></span></div></div>';
}
},
],
"sAjaxSource": '<?php echo url_for('@test?sf_format=json'); ?>',
} );
我做了以下方式:
jQuery.fn.dataTableExt.oSort['custom-asc'] = function(x,y) {
if (x.indexOf("MY VALUE") != -1) return -1; // keep this row at top
if (y.indexOf("MY VALUE") != -1) return 1; // keep this row at top
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['custom-desc'] = function(x,y) {
if (x.indexOf("MY VALUE") != -1) return 1; // keep this row at top
if (y.indexOf("MY VALUE") != -1) return -1; // keep this row at top
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
这将使文本中具有"MY VALUE"的行保持在顶部位置。但问题是,当我对另一列进行排序时,"固定"行并没有保留在表的顶部。
有什么解决方案吗?
只是不要对它进行排序。使用类似的tfoot
-
<thead> ... </thead>
<tfoot style="display: table-row-group"> ... </tfoot>
<tbody> ... </tbody>
这并不容易,您可以做的一件事是将自定义排序与自定义数据源的自定义数据源排序混合
// var oTable;
var onTopValues = new Array("Litige", "5410");
/* disable asc sorting for specific rows */
jQuery.fn.dataTableExt.oSort['custom-asc'] = function(x,y) {
if (isOnTop(x)) return -1; // keep this row at top
if (isOnTop(y)) return 1; // keep this row at top
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['custom-desc'] = function(x,y) {
if (isOnTop(x)) return -1; // keep this row at top
if (isOnTop(y)) return 1; // keep this row at top
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
function isOnTop(s) {
// search for on top values
for (var i = 0; i < onTopValues.length; i++) {
if (s === onTopValues[i]) {
return true;
}
}
return false;
}
//custom datasource
$.fn.dataTableExt.afnSortData['custom-ontop'] = function ( oSettings, iColumn )
{
var aData = [];
//prepare the data
$('td:eq('+iColumn+')', oSettings.oApi._fnGetTrNodes(oSettings)).each(function(){
//If the last column of this row should stay on top, return the value of the
//last row as datasource
if(isOnTop($(this).closest('tr').find('td:last').text())){
aData.push($(this).closest('tr').find('td:last').text());
}else{
//otherwise return this row as datasource
aData.push($(this).text());
}
});
return aData;
};
$(document).ready(function() {
/* Apply custom classes to table headers */
$.fn.dataTableExt.oStdClasses.sSortAsc = "custom_asc";
$.fn.dataTableExt.oStdClasses.sSortDesc = "custom_desc";
oTable = $('#transactions').dataTable({
"aoColumnDefs": [ { aTargets: [0,1,2,3], sType: "custom"}] ,
"aoColumns": [
{ "sSortDataType": "custom-ontop" },
{ "sSortDataType": "custom-ontop" },
{ "sSortDataType": "custom-ontop" },
{ "sSortDataType": "custom-ontop" },
{ "sSortDataType": "custom-ontop" }
],
"aaSorting": [],
"aaData": [
[ "2012-01-2", "2", "Local <br>0312313213", 20, "Litige" ],
[ "2012-03-22", "25", "Local <br>35313313213", 5540, "Valid" ],
[ "2012-01-2", "2", "Local <br>0312313213", 10, "Valid" ],
[ "2012-03-22", "25", "Local <br>35313313213", 5410, "Valid" ]
]
});
});
基本上,您仍在使用排序函数,但您向它们传递了一个自定义数据源,强制值保持在顶部。这假设您正在对最后一列进行排序,但您可以将逻辑添加到其中
http://jsbin.com/eroyac/4/edit#preview
这样我就可以锁定第一行,排序只影响这一行之后的行。检查此页面以了解其他选项:http://datatables.net/reference/option/orderFixed
$('#budgytbl').dataTable({
"orderFixed": [ 0, 'asc' ]
})
<table id="budgytbl"...
<tbody>
<tr>
<td></td>
<td id="input-name"></td>
<td id="input-parent"></td>
</tr>
@foreach ($categories as $category)
<tr>
...
</tr>
@endforeach
...
我有一个更简单的解决方案。
我在表中创建了第二个tbody
,只需移动需要保存在另一个tbody
中的所有行,如下所示:
initComplete: function() {
var self = this;
var api = this.api();
api.rows().eq(0).each(function(index) {
var row = api.row(index);
if (row.data()...) { // condition here
var $row_to_persist = $(row.node());
var $clone = $row_to_persist .clone();
$(self).find('tbody:last').append($clone);
$total_row.remove();
row.remove();
api.draw();
}
});
}
相关文章:
- 对角度数据表中括号内的数字进行排序
- 对损坏的子行进行排序的数据表
- 数据表排序但对行进行分组
- 数据表通过分析一列的值对其进行排序
- 排序数据表
- 基于单选按钮和复选框的数据表排序
- 如何对数据表中的容量列进行排序
- 使用 IP 地址和超链接对数据表进行排序
- Javascript在素数面的数据表中排序后丢失
- AJAX使用jQuery可排序(非表单)发布附加数据
- 禁用jquery数据表中的行重新排序
- 如何在两个不同的选项卡(jQuery数据表)上同步处理可排序表
- 使用J-query数据表,美国日期格式的自定义排序不起作用
- 通过自定义排序 ID 对数据表列进行排序
- (钛工作室)显示带有排序数据的表视图
- 数据表 aa排序未按正确的列排序
- 我无法使用行重新排序替换数据表中的行
- 为什么不能关闭我的数据表的排序
- j查询数据表禁用特定行中的排序
- 我如何排序数据表列,其中包含十进制值与$符号- JQuery数据表