如何将隐藏的 jQuery DataTables 列发布到表单

Question

我有一个带有一些可见列（名字、姓氏）和一个隐藏列（id）的 DataTable。我正在使用 DataTable 行选择示例来突出显示用户选择的行。按下按钮时，我可以在隐藏列中显示所选行的值。我想弄清楚的是如何将隐藏的值作为我表单上的输入变量发布到另一个页面。

这是我的按钮调用的函数，它只是显示我要发布的隐藏 id 列。

$('#select').click( function() {

   var anSelected = fnGetSelected( oTable );

   if ( anSelected.length == 0 ) {
      alert('Please make a selection');
   } else {

      // Get data from the selected row                    
      var aRow = anSelected[0];
      var sFirstName = oTable.fnGetData( aRow, 0 );
      var sLastName = oTable.fnGetData( aRow, 1 );
      var sID = oTable.fnGetData( aRow, 2 );

      alert('You have selected ' + sID);
   }
} );

我不清楚如何将此值作为输入变量发布到表单上。

我还找到了一个尝试解决此问题的示例，但它未能显示如何实际发布值。

$(document).ready(function() {

   var oTable;

   $('#form').submit( function() {
      var sData = $('input', oTable.fnGetNodes()).serialize();
      alert( "The following would have been submitted to the form: \n\n"+sData );
      return true;
   } );

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

} );

如果您没有猜到，我是 jQuery 和 DataTables 的新手。 :)

提前感谢您的帮助...

Answer 1

我的需求基本上与您相同，这是我对解决方案的看法：

1) 创建传递自定义fnCreatedRow 回调的dataTable。回调将用于在每个创建的行上添加一个点击监听器。

var options = {
    fnCreatedRow: createdRow,
    ...
};

var dataTable = element.dataTable(options);

2) 创建监听器时，确保将行索引转发给实际监听器

function createdRow(nRow, aData, iDataIndex) {
    $(nRow).on('click', {dataIndex: iDataIndex}, rowClickListener);
}

3) 在点击侦听器中，使用索引获取行的实际数据（即 JS 对象，而不是 HTML），调用 dataTable 对象上的 `fnGetData' API。 p>

function rowClickListener (evt) {
    var rowData = dataTable.fnGetData(evt.data.dataIndex);

    console.log(rowData.lastName + ' ' rowData.firstName);
}

这也归功于用户spasco。

Answer 2

我想出了两种不同的解决方案来解决这个问题，我将它们发布给其他可能觉得它们有用的人。基本思路是：

(a) 知道用户选择了哪一行 (b) 读取该行的隐藏列的值 (c) 将值分配给隐藏的表单域

两种解决方案的区别在于赋值的时间。在第一个解决方案中，值是在用户点击提交按钮时分配的。在第二种解决方案中，每次用户单击一行时都会分配该值。

解决方案 #1：这基于我之前发布的代码。在这里，我简单地将警报对话框替换为使用 getElementById 函数将隐藏值分配给隐藏表单字段的语句。

$('#select').click( function() {

   var anSelected = oTable.$('tr.row_selected');

   if ( anSelected.length == 0 ) {
      alert('Please make a selection');
   } else { 
      // Get data from the selected row                    
      var aRow = anSelected[0];
      var sFirstName = oTable.fnGetData( aRow, 0 ); // Don't need this anymore
      var sLastName = oTable.fnGetData( aRow, 1 ); // Don't need this anymore
      var sID = oTable.fnGetData( aRow, 2 ); // Hidden column

      document.getElementById('hiddenUserID').value = sID;
   }
} );

在我的表单中，我有一个隐藏的输入字段和一个调用上述函数的提交按钮。

<input type="hidden" name="user_id" id="hiddenUserID" value="" />
<button id="select" type="submit">Select User</button>

解决方案 #2：在此解决方案中，我会在每次用户选择一行时分配值。代码借鉴了 DataTables 行选择示例，可以在这里找到：

http://datatables.net/release-datatables/examples/api/select_single_row.html

/* Add a click handler to the rows */
$("#example tbody tr").click( function( e ) {

    if ( $(this).hasClass('row_selected') ) {
        $(this).removeClass('row_selected');
    } else {
        oTable.$('tr.row_selected').removeClass('row_selected');
        $(this).addClass('row_selected');

        // Get the data from the selected row
        var sID = oTable.fnGetData( this, 2 );
        document.getElementById('hiddenUserID').value = sID;
    }
});

我的表单具有与上述相同的隐藏输入字段。我的提交按钮也调用了第一个解决方案中的函数，但只是为了检查是否选择了一行。

两种解决方案都很好用。我想您使用哪一种取决于个人喜好和需求。