[英]How to select a row in Jquery datatable
I am using datatables in 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 sRowSelect
and fnRowSelected
but no luck. 我试过
sRowSelect
和fnRowSelected
但没有运气。 The row is not highlighted and neither fnRowSelected
is called. 该行未突出显示,也
fnRowSelected
调用fnRowSelected
。 Even no error on console. 即使控制台上没有错误。
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. 现在能够突出显示所选的row.Added class =“display”到HTML表格。 Still wondering why I didn't find this in datatable docs.
仍然想知道为什么我没有在datatable文档中找到它。 Now looking how to collect selected values.
现在看看如何收集选定的值。
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
}
When you are using fnRowSelected
(ie 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.
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");
} );
})
The selected class should be, Within your function you used $s
and you define var s
which is not the same var. 所选的类应该是,在你的函数中使用
$s
并定义var s
,它们不是var。
"oTableTools": {
"sSelectedClass": "yourclassname",
"sRowSelect": "single",
"fnRowSelected": function ( node ) {
var s=$(node).children();
alert("Selected Row : " + s[0]);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.