У меня есть таблица данных, в которой при сортировке таблицы я не получаю строки в отсортированной форме, даже если в пользовательском интерфейсе она сортируется.
Я пытаюсь получить строки, используя oTable.fnGetNodes();
Fiddle Link
Для печати в консоли щелкните любую строку.
вывод перед сортировкой
0: tr.odd
1: tr.even
2: tr.odd
3: tr.even
4: tr.odd.row_selected
5: tr.even
6: tr.odd
вывод после сортировки
0: tr.odd
1: tr.odd.row_selected
2: tr.odd
3: tr.odd
4: tr.row_selected.even
5: tr.even
6: tr.even
Javascript
/* Datatable variables */
var oTable;
var selectedData = [];
/* Datatable export button */
var btnUrl = 'http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf';
/* Fake data */
var data = [
{id: 1, countryCode: 'US', countryName: 'United States'},
{id: 2, countryCode: 'PE', countryName: 'Peru'},
{id: 3, countryCode: 'AR', countryName: 'Argentina'},
{id: 4, countryCode: 'DK', countryName: 'Denmark'},
{id: 5, countryCode: 'MX', countryName: 'Mexico'},
{id: 6, countryCode: 'UK', countryName: 'United Kingdom'},
{id: 7, countryCode: 'AU', countryName: 'Australia'}
];
/* Extra fake data */
var extraData = [
{id: 8, countryCode: 'BZ', countryName: 'Brazil'},
{id: 9, countryCode: 'UY', countryName: 'Uruguay'},
{id: 10, countryCode: 'BO', countryName: 'Bolivia'}
];
/* Used to get selected rows */
function fnGetSelected() {
var aReturn = [];
var aTrs = oTable.fnGetNodes();
debugger;
for(var i = 0; i < aTrs.length; ++i) {
if ($(aTrs[i]).hasClass('row_selected')) {
aReturn.push( aTrs[i] );
}
}
return aReturn;
};
/* Used to init datatables */
function initDataTables() {
var tbl = $('#countryTbl').dataTable({
"bJQueryUI": true,
"bDestroy": true,
"sDom": "<'row-fluid'<'span6'f><'span6'<'pull-right'T>>r>t",
"bAutoWidth": false,
"lockedHeader": false,
" sortable": false,
"infiniteScroll": true,
"aaData": data,
"aoColumns": [
{"sTitle": "Id", "mDataProp": "id" },
{"sTitle": "Code", "mDataProp": "countryCode" },
{"sTitle": "Name", "mDataProp": "countryName" }
],
"oTableTools": {
"sSwfPath": btnUrl,
"aButtons": ["copy", "xls"]
}
});
applyStyles();
return tbl;
};
/* Add extra style to table and other elements */
function applyStyles() {
$('.dataTables_length select').addClass('span3');
$('.dataTables_filter input').addClass('span9 search-query');
$('.DTTT_container').addClass('btn-group');
$('div.dataTables_paginate a, a.DTTT_button').addClass('btn btn-mini');
};
$(function() {
/* Add datatable feature */
oTable = initDataTables();
/* Handle process button */
$('#btn-process').on('click', function(e){
alert('Check browser console :-)');
console.log(selectedData);
});
/* Handle add countries button */
$('#btn-add').one('click', function() {
oTable.fnAddData(extraData);
});
/*
* Handle selected rows!
* Using 'delegate' solves the issue of not getting selected
* the new rows. If you want to replicate the issue, replace
* this line with the following:
* '$('#countryTbl tbody tr').on('click', function(){...});'
* and take a look.
*/
$('#countryTbl').delegate('tbody tr', 'click', function() {
var aData = oTable.fnGetData(this);
var rows = oTable.fnGetNodes();
console.info(rows);
if ($.inArray(aData, selectedData) == -1) {
selectedData[selectedData.length++] = aData;
} else {
selectedData = $.grep(selectedData, function(val) {
return val != aData;
});
}
$(this).toggleClass('row_selected');
});
});