固定行以数据表排序 [英] Fixed rows sorting in datatables
本文介绍了固定行以数据表排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的数据设置：
var oTable = $ '#transactions'）dataTable（{
aaSorting：[[0，'desc']]，
bFilter：false，
bSort：true，
aaSorting：[[3，'desc']]，//默认搜索colums
//aaSortingFixed：[[3，'desc']]，
bPaginate：true，
bProcessing：true，
sPaginationType：full_numbers，
asStripeClasses：['monitoring-table-new']，
bAutoWidth
aoColumns：[
{sType：custom，
sClass：td-date-size-cell，
fnRender oObj，sVal）{
return'< div class =monitoring-head-new leadencolor>< div class =form-border>< span class =date>< em>'+ sVal +'< / em>< / span>< / div>< / div>';
}
}，
{sType自定义，
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; //保持此行位于顶部
if（y.indexOf（MY VALUE）！= -1）return 1; //保持此行位于顶部
return（（x< y）？-1：（（x> y）？1：0））;
};
jQuery.fn.dataTableExt.oSort ['custom-desc'] = function（x，y）{
if（x.indexOf（MY VALUE）！= -1）返回1; //保持此行位于顶部
if（y.indexOf（MY VALUE）！= -1）return -1; //保持此行位于顶部
return（（x< y）？1：（（x> y）？-1：0））;
};
这将在文本中保持MY VALUE的行顶部。但是问题是，当我对其他列进行排序时，固定行不会保留在表的顶部。
任何解决方案？
解决方案
这不容易，您可以做的一件事是将自定义排序与自定义数据源排序定制您的数据源
// var oTable;
var onTopValues = new Array（Litige，5410）;
/ *禁止特定行的排序* /
jQuery.fn.dataTableExt.oSort ['custom-asc'] = function（x，y）{
if（isOnTop（x）））返回-1; //保持此行位于顶部
if（isOnTop（y））return 1; //保持此行位于顶部
return（（x< y）？-1：（（x> y）？1：0））;
};
jQuery.fn.dataTableExt.oSort ['custom-desc'] = function（x，y）{
if（isOnTop（x））return -1; //保持此行位于顶部
if（isOnTop（y））return 1; //保持此行位于顶部
return（（x< y）？1：（（x> y）？-1：0））;
};
函数isOnTop（s）{
//搜索顶部值
for（var i = 0; i< onTopValues.length; i ++）{
if（s === onTopValues [i]）{
return true;
}
}
return false;
}
//自定义数据源
$ .fn.dataTableExt.afnSortData ['custom-ontop'] = function（oSettings，iColumn）
{
var aData = [];
//准备数据
$（'td：eq（'+ iColumn +'）'，oSettings.oApi._fnGetTrNodes（oSettings））。each（function（）{
// If该行的最后一列应该保持在顶部，返回
//最后一行的值作为datasource
if（isOnTop（$（this）.closest（'tr'）。find（'td ：最后'）。text（）））{
aData.push（$（this）.closest（'tr'）。find（'td：last'）。text（））;
} else {
//否则返回此行为datasource
aData.push（$（this）.text（））;
}
}）;
返回aData;
};
$（document）.ready（function（）{
/ *将自定义类应用于表头* /
$ .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，本地< br> 0312313213，20，Litige]，
[2012-03-22，25 br> 35313313213，5540有效]，
[2012-01-2，2，Loca lbr0312313213，10，有效]，
[2012-03-22，25，本地< br> 35313313213，5410，有效]
]
}）;
}）;
基本上您仍在使用排序功能，但您传递一个自定义数据源，强制值保留在上面。这假设您在最后一列排序，但您可以添加逻辑。
http://jsbin.com/eroyac/4/edit#preview
I want to establish some fixed rows in head of the datatable.
This is my datatable settings:
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'); ?>',
} );
I have done in the following way:
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));
};
This will keep in top position the rows which have "MY VALUE" in text. But the problem is that when I sort on other column, the "fixed" row is not remaining on top of the table.
Any solutions?
解决方案
This is not easy, one thing you could do is mix your custom sorting with a custom datasource sorting tha customizes your datasource
// 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" ]
]
});
});
Basically you are still using your sorting function but you pass them a custom datasource that forces the values to stay on top. This assume that you are sorting on the last column, but you can add your logic to it.
http://jsbin.com/eroyac/4/edit#preview
这篇关于固定行以数据表排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
