Получите строки в порядке после сортировки в таблицах данных - PullRequest
0 голосов
/ 11 марта 2019

У меня есть таблица данных, в которой при сортировке таблицы я не получаю строки в отсортированной форме, даже если в пользовательском интерфейсе она сортируется. Я пытаюсь получить строки, используя 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');
    });

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...