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。我有额外的记录集，我想只调用一次数据库就返回，但这在数据表框架内可能吗？输出 JSON 的页面在由数据表检索时只需要 JSON，并且在存在任何其他元素时会给出错误。

更新 1： 不知道这是否是一条正确的路线， 但我现在在想，一种选择是使用数据表 隐藏列功能。 http://www.datatables.net/examples/basic_init/hidden_columns.html 我想你可以在隐藏列的单个单元格中填充带有 ID 的元素， 然后通过 jQuery 访问 ID 的信息。

更新 2： 也许这就是父页面上的其他元素可以 从 JSON 响应页面中的元素更新（我也提出了这个 数据表论坛中的问题，没有回应）：

1. 为每个隐藏的输入添加并包含 ID 在第一行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 需要什么。因此，虽然您需要输出包含 “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 );
   });
});

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填充表时的问题是所选节点的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];
    }
  }
});