问题
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?
回答1:
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
回答2:
Just don't sort it. Use a tfoot like so -
<thead> ... </thead>
<tfoot style="display: table-row-group"> ... </tfoot>
<tbody> ... </tbody>
回答3:
This way i can lock the first row, and the sorting only affects the row after this one. Check this page for other options : 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
...回答4:
I have a simplier solution.
I create the second tbody in my table and just move all rows I need to persist in that another tbody like so:
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();
}
});
}
来源：https://stackoverflow.com/questions/9939889/fixed-rows-sorting-in-datatables