私はアプリケーションで datatables を使用しています。ユーザーが任意の行をクリックするたびに、その行を強調表示して、選択した行からいくつかの値を選択します。
"oTableTools": {
"sRowSelect": "single",
"fnRowSelected": function ( node ) {
var s=$(node).children();
alert("Selected Row : " + $s[0]);
}
sRowSelect
とfnRowSelected
を試しましたが、うまくいきませんでした。行は強調表示されず、fnRowSelected
も呼び出されません。コンソールでもエラーはありません。
これが私の完全なコードです
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");
}
}
});
私は何かが足りませんか?
編集:
選択した行を強調表示できるようになりました。HTMLテーブルにclass = "display"を追加しました。なぜこれがdatatableドキュメントで見つからなかったのか疑問に思っています。次に、選択した値を収集する方法を探します。
これが私のやり方です
この関数をページに追加するだけです(ユーザーがテーブル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
}
fnRowSelected
を使用している場合(つまり、新しいtabletoolを作成している場合)、使用する必要があります
"sRowSelect": "multi",
これで問題は解決します。役に立ったらコメント数を増やしてください。もっとポイントが必要です。
私はそれを私のコードで次のように使用しました
pqrtbl = new TableTools(NameOfTbl, { "sRowSelect": "multi",
"fnRowSelected": function ( node ) {
var s= $(node).children();
fnAddToSelLst(s[1].innerText);
},.......................
//column index depend upon your req.
複数の行を選択したい場合は、ajaxの目的で選択した行のデータを取得したい場合はこれを確認してください
http://jsfiddle.net/ezospama/1/
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");
} );
})
選択したクラスは、関数内で$s
を使用し、同じ変数ではないvar s
を定義する必要があります。
"oTableTools": {
"sSelectedClass": "yourclassname",
"sRowSelect": "single",
"fnRowSelected": function ( node ) {
var s=$(node).children();
alert("Selected Row : " + s[0]);
}
}