Плагин jquery DataTables: можете ли вы захватывать данные на стороне сервера, отличные от JSON, ожидаемого плагином?

Question

Я использую "bServerSide": true, "sAjaxSource": и "fnServerData": ... для заполнения таблицы данных. Это работает нормально.

 "bFilter": true,
"bSort": true, 
"bSortClasses": true, 
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "my_page_that_outputs_json.asp",

"fnServerData": function ( sSource, aoData, fnCallback ) {
    aoData.push( { "name": "my_custom_var"  , "value": $('#someCustomVar').val() } );                   
    $.getJSON( sSource, aoData, function (json) { 
        fnCallback(json);  
    } );
},

Однако, когда я звоню на сервер, я хочу вернуть больше, чем просто JSON со страницы, соединяющейся с сервером. У меня есть дополнительные наборы записей, которые я хотел бы вернуть с помощью всего одного вызова базы данных, но возможно ли это в рамках datatables? Страница, выводящая JSON, когда извлекается из таблицы данных, ожидает только JSON и выдает ошибку, когда присутствуют любые другие элементы.

Обновление 1: не знаю, является ли это правильным маршрутом, но теперь я думаю, что один из вариантов будет использовать таблицы данных функция скрытых столбцов. http://www.datatables.net/examples/basic_init/hidden_columns.html Я полагаю, вы могли бы поместить элементы с идентификаторами в одну ячейку в скрытом столбце, а затем получить доступ к информации идентификатора через JQuery.

Обновление 2: Может быть, так могут другие элементы на родительской странице быть обновленным из элементов на странице ответов JSON (я также изложил это проблема на форуме datatables, без ответа):

1. добавить и включить идентификаторы для каждого скрытого ввода в первом ряду данных JSON

2. не пытайтесь скрыть столбцы, потому что элементы кажутся недоступными когда колонка скрыта. (если я ошибаюсь, кто-то, пожалуйста, сообщите ...)

3. , если скрытый ввод нужно обработать только один раз, тогда сделайте это

4. доступ к скрытому вводу через jQuery на родительской странице

Обновление 3: @ JM4 - я не знаю, что это конкретно решит ваш вопрос, но я смог использовать скрытый маршрут ввода - например, <input type="hidden id="myCustomID_012" /> - и выполнить то, что мне нужно было сделать.

Я использовал функцию, подобную следующей, для обработки щелчка строки. Эта функция была за пределами сборки dataTable.

function clickRowHandler() {
/* Highlight selected row on single click */
$('.tblIntrepid tbody tr').click(function(event) {
    $(oTable.fnSettings().aoData).each(function (){
        $(this.nTr).removeClass('row_selected');
    });

    // update the myIntrepidID value for form "complete" submission
            // myIntrepidID was already on the page, not in the dataTable
    var myNewIntrepidID = $(this).find("td:first input").val(); 
    $('#myIntrepidID').val(myNewIntrepidID); 
    // set the row class
    $(event.target.parentNode).toggleClass('row_selected');
    });
   /* more details */
  }

Внутри сборки dataTable была вызвана функция clickRowHandler в таким образом:

"fnDrawCallback": function() {
        clickRowHandler();
},

Кроме того, я не могу вспомнить, где я видел это на форуме DataTables (вероятно, началось здесь: http://datatables.net/forums/comments.php?DiscussionID=3931) но другой путь, который вы можете использовать, это вывод данных JSON выше и выше какие dataTables требует. Итак, пока вам нужно вывести JSON, который включает в себя "sEcho" и "iTotalRecords" и "iTotalDisplayRecords" и "aaData", Вы также можете создавать свои собственные пары имя / значение.

Если у вас был список из 10 имен пользователей, которые вы хотели в выпадающем списке в заголовке таблицы вы можете построить пару имя / значение на месте Вы создаете свой JSON и называете его «selectUserNames». Тогда в вашем сборка dataTables, вы бы превратили этот пользовательский объект json в свой список (Я не отображаю все функции здесь):

Эта функция вне сборки dataTables создает выпадающий список. // http://datatables.net/forums/comments.php?DiscussionID=3931&page=1#Item_6

function fnCreateSelect( aData ) {
    var r='<select><option value=""></option>', i, iLen=aData.length;
    //alert(iLen); 
    for ( i=0 ; i<iLen ; i++ )
    {
        r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
    }
    return r+'</select>';
}

А внутри dataTables build ...

  $.getJSON( sSource, aoData, function (json) { 
     if ( json.sEcho == 1 ) {
        $("thead td.search").each( function () {

/* Insert the select menu */
this.innerHTML = fnCreateSelect(json.selectUserNames);

/* Add the event listener for the newly created element */
   $('select', this).change( function () {
     oTable.fnFilter( $(this).val(), 8 );
   });
});

Answer 1

Если вы используете drawcallback для добавления класса в текущую строку (например, добавьте выбранный класс), можно получить скрытые значения.

Вот моя функция fnDrawCallback, которая добавляет класс 'row_selected' в текущую строку. Это работает, только если это единственная строка с этим классом.

"fnDrawCallback": function(){
  $('td').bind('mouseenter', function () { $(this).parent().addClass('row_selected').css('cursor', 'pointer'); });
  $('td').bind('mouseleave', function () { $(this).parent().removeClass('row_selected'); });
},

Проблема при заполнении таблицы с помощью json заключается в том, что имя узла выбранного узла не определено. Таким образом, вместо этого вы можете найти строку с выбранным вами классом

$("#leadList tbody").click(function(event) {
  var aTrs = table.fnGetNodes();
  for ( var i=0 ; i<aTrs.length ; i++ ) {
    if ($(aTrs[i]).hasClass('row_selected') ) {
      // here you get the data without the need of fnGetPosition
      var aData = table.fnGetData( i );
      location.href='mylink/' + aData[0];
    }
  }
});