2011-01-25 6 views
0

Я использую «bServerSide»: true, «sAjaxSource» :, и «fnServerData»: ... для заполнения данных. Это работает нормально.jquery Плагин DataTables: можете ли вы захватить данные на стороне сервера, кроме ожидаемого плагином JSON?

"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 и дает ошибку, когда присутствуют какие-либо другие элементы.

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

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

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

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

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

  4. доступ скрытый ввод с помощью JQuery на родительской странице

Update 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 построить ...

$.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); 
    }); 
}); 
+0

Как вы в настоящее время присваиваете данные? как JS-массив или Ajax? – Chandu

+0

Hi Cybernate, я добавил образец кода datatables, который я использую. – mg1075

+0

Я думаю, мы потенциально удивляемся тому же. Я пытаюсь, чтобы «скрытая строка» выполняла последующий вызов внешнего источника php, обрабатывала и возвращала эти данные в новую «скрытую строку». Вы когда-либо делали какой-либо прогресс в этом вопросе? – JM4

ответ

0

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

Это моя функция 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, что NODENAME выбранного узла не определен. Поэтому вместо этого вы можете найти строку с выбранным вами классом

$("#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]; 
    } 
    } 
});