как захватить данные в выбранной строке с помощью таблиц данных jQuery

#jquery #datatables

#jquery #таблицы данных

Вопрос:

У меня есть эта настройка datatable:

 $(document).ready(function() {
    $('#RectifiedCount').dataTable( {
        "bJQueryUI": true,
        "bProcessing": true,
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "bStateSave": true,
        "sDom": '<"H"if>tr<"F"lTp>',
        "aoColumns":[
                     {'sname':'count_id', 'sType':'numeric', 'bVisible':false},
                     {'sName':'count_type', 'sType':'string','bVisible':true},
                     {'sName':'count_date', 'sType':'date','bVisible':true},
                     {'sName':'count_count', 'sType':'numeric','bVisible':true},
                     {'sName':'count_notes', 'sType':'string','bVisible':true}
                     ],
        "oTableTools": {
            "sRowSelect": "single",
            "sSwfPath": "media/swf/copy_cvs_xls_pdf.swf",
            "aButtons": [ {sExtends :'select_none' , 'sButtonText':'Clear Selection'}],
            "fnRowSelected": function(node){
                var s=$(node).children();
                if($(s[0]).text()=='Delivery') return ;
                $('select[name="count_type"]').val($(s[0]).text());
                $('input[name="count_date"]').val($(s[1]).text());
                $('input[name="count_count"]').val($(s[2]).text());
                $('textarea[name="count_notes"]').val($(s[3]).text());
            }
        },
        'sScrollX':'100%'
    });
});
  

Когда я выбираю строку, я хочу скопировать значения ячеек этой строки в некоторые поля формы, которые называются так же, как атрибуты ‘sName’. У меня есть 2 вопроса:

  • существует ли метод TableTools для доступа к значению ячейки в выбранной строке? Что-то вроде node['sName_whatever'].value было бы неплохо.
  • как я могу получить значение ячеек, где bVisible= false?

Решение ETA

(оставляя неважный материал)

 $(document).ready(function() {
    rctable=$('#RectifiedCount').dataTable( {
        "aoColumns":[
                     {'sname':'count_id', 'sType':'numeric', 'bVisible':false},
                     {'sName':'count_type', 'sType':'string','bVisible':true},
                     {'sName':'count_date', 'sType':'date','bVisible':true},
                     {'sName':'count_count', 'sType':'numeric','bVisible':true},
                     {'sName':'count_notes', 'sType':'string','bVisible':true}
                     ],
        "oTableTools": {
            "sRowSelect": "single",
            "fnRowSelected": function(node){
                aData = rctable.fnGetData(node); //nice array of cell values
                if(aData[0]=='Delivery') return ;
                $('select[name="count_type"]').val(aData[0]);
                $('input[name="count_date"]').val(aData[1]);
                $('input[name="count_count"]').val(aData[2]);
                $('textarea[name="count_notes"]').val(aData[3]);            }
        }
    });
});
  

Комментарии:

1. Эта строка неверна: aData = rctable.fnGetData(node); она должна быть aData = rctable.fnGetData(node[0]); , потому что node это массив.

Ответ №1:

Я сделал следующее:

  oTable = $('#RectifiedCount').dataTable( ....);

 $('#RectifiedCount tbody tr').live('click', function (event) {        
    var aData = oTable.fnGetData(this); // get datarow
    if (null != aData)  // null if we clicked on title row
    {
        //now aData[0] - 1st column(count_id), aData[1] -2nd, etc. 
    }
});
  

Комментарии:

1. вы указали мне правильное направление, но я собираюсь использовать .fnGetData() функцию внутри fnRowSelected() функции

2. Я полагаю, что вы также можете использовать fnGetData inside fnRowSelected . Хотя я не уверен в точном коде…

Ответ №2:

Найдите лучший способ вместо того, чтобы перехватывать событие click, используя только jquery и TableTools:

 "oTableTools": {
"sRowSelect": "single",
"fnRowSelected": function(node) {
    var row = $(node).find('td');
    //all cells
    $.each(row, function(index, td) {
        console.log($(td).text());
    });

    console.log("Specific cell content: "   $(row[2]).text());

}
  

}