Javascript 如何在Jquery数据表中选择一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8242684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select a row in Jquery datatable
提问by xyz
I am using datatablesin my application. Whenever user click on any row I want to highlight it and pick some values from selected row.
我使用的数据表在我的应用程序。每当用户单击任何行时，我都想突出显示它并从所选行中选择一些值。
"oTableTools": {
"sRowSelect": "single",
"fnRowSelected": function ( node ) {
var s=$(node).children();
alert("Selected Row : " + $s[0]);
}
I tried sRowSelectand fnRowSelectedbut no luck. The row is not highlighted and neither fnRowSelectedis called. Even no error on console.
我试过了 sRowSelect，fnRowSelected但没有运气。该行没有突出显示，也没有fnRowSelected被调用。即使在控制台上也没有错误。
Here is my complete code
这是我的完整代码
var userTable = $('#users').dataTable({
"bPaginate": true,
"bScrollCollapse": true,
"iDisplayLength": 10,
"bFilter": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "Display _MENU_ records per page",
"sZeroRecords": "Enter a string and click on search",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ results",
"sInfoEmpty": "Showing 0 to 0 of 0 results",
"sInfoFiltered": "(filtered from _MAX_ total results)"
},
"aaSorting": [[ 0, "asc" ]],
"aoColumns": [/* Name */ null,
/*Institution*/null,
/*Email*/null],
"oTableTools": {
"sRowSelect": "single",
"fnRowSelected": function ( node ) {
alert("Clicked");
}
}
});
Am I missing anything ?
我错过了什么吗？
EDIT:
Now able to highlight selected row.Added class="display" to HTML table. Still wondering why I didn't find this in datatable docs. Now looking how to collect selected values.
编辑：
现在能够突出显示选定的行。将 class="display" 添加到 HTML 表。仍然想知道为什么我没有在数据表文档中找到这个。现在看看如何收集选定的值。
采纳答案by Daniel
Here is how I do it
这是我如何做到的
just add this function to your page (if users is your table id)
只需将此功能添加到您的页面（如果用户是您的表 ID）
$("#users tbody").delegate("tr", "click", function() {
var iPos = userTable.fnGetPosition( this );
if(iPos!=null){
//couple of example on what can be done with the clicked row...
var aData = userTable.fnGetData( iPos );//get data of the clicked row
var iId = aData[1];//get column data of the row
userTable.fnDeleteRow(iPos);//delete row
}
回答by psdk
When you are using fnRowSelected(i.e. when creating new tabletool) you have to use
当您使用fnRowSelected（即创建新的tabletool）时，您必须使用
"sRowSelect": "multi",
That will resolve the issue. Please increment my comment count if it helps. I need to have more points.
这将解决问题。如果有帮助，请增加我的评论数。我需要更多的积分。
I used it in my code as follows
我在我的代码中使用它如下
pqrtbl = new TableTools(NameOfTbl, { "sRowSelect": "multi",
"fnRowSelected": function ( node ) {
var s= $(node).children();
fnAddToSelLst(s[1].innerText);
},.......................
//column index depend upon your req.
回答by Bheru Lal Lohar
If you wanna select multiple row, wanna get the data of selected row for ajax purpose check this
如果您想选择多行，想要获取所选行的数据以用于 ajax 目的，请检查此
http://jsfiddle.net/ezospama/1/
http://jsfiddle.net/ezospama/1/
DataTable code will be as follows
DataTable代码如下
$(document).ready(function() {
var table = $('#datatable').DataTable();
$('#datatable tbody').on( 'click', 'tr', function (){
$(this).toggleClass('selected');
} );
$('#btn').click( function () {
console.log(table.rows('.selected').data());
alert("Check the console for selected data");
} );
})
回答by Niels
The selected class should be, Within your function you used $sand you define var swhich is not the same var.
选定的类应该是，在您使用的函数中$s，您定义var s哪个不是同一个变量。
"oTableTools": {
"sSelectedClass": "yourclassname",
"sRowSelect": "single",
"fnRowSelected": function ( node ) {
var s=$(node).children();
alert("Selected Row : " + s[0]);
}
}
