Question

我有一个DataTable，其中包含一些可见列（名字，姓氏）和一个隐藏列（id）。我正在使用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

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

（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;
    }
});

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

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

Answer 2

我基本上有同样的需求，这是我对解决方案的看法：

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。

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

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

此信用也适用于用户spasco。

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

2 个答案: