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

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

下面是我的按钮调用的函数，它只是显示我想要发布的隐藏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，万一你没有猜到。 :)

在此先感谢您的帮助......

来源

2012-07-20 Brian

这是否有助于http://api.jquery.com/jQuery.post/？ – Allan 2012-07-21 00:28:19

那么，你在哪里停下来？怎么了？你能提醒'selectedId'吗？ – 2012-07-21 01:16:50

我想出了两种不同的解决这个问题，这我张贴别人谁可能会发现它们非常有用。其基本思想是：

的（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：在此解决方案中，我在每次用户选择一行时分配值。该代码从数据表行选择示例，其可以在这里找到借用：

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

我的形式具有相同的隐藏的输入字段如上所述。我的提交按钮还会在第一个解决方案中调用该函数，但仅用于检查是否选择了一行。

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

来源

2012-07-22 04:06:16 Brian

关于来自不同页面的多个选定行，该怎么办？你将如何构建值（ID）数组并将其与表单中的其他字段一起发布？谢谢 – Enrique 2015-05-05 21:41:34

我已经得到了基本相同的需求，这里是我采取的解决方案：

1）创建数据表通过自定义fnCreatedRow回调。该回调将用于在每个创建的行上添加点击侦听器。

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。

来源

2013-03-06 14:18:07 superjos

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

回答

相关问题