fnGetPosition
DOM要素から特定のセルの配列インデックスを取得します。 fnGetData（）と組み合わせて使用するのが最適です。
入力パラメーター：
nNode：位置を検索するノード。これは、テーブルの「TR」行または「TD」セルのいずれかです。戻りパラメーターは、この入力に依存します。
戻りパラメーター：
intまたは配列[int、int、int]：ノードがテーブル行（TR）の場合、戻り値はaoDataオブジェクトの行のインデックスを持つ整数になります。ノードがテーブルセル（TD）の場合、戻り値は[aoDataインデックス行、列インデックス（非表示の行を割引）、列インデックス（非表示の行を含む）]の配列になります。
コード例：
$(document).ready(function() {
$('#example tbody td').click( function () {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition( this );
/* Get the data array for this row */
var aData = oTable.fnGetData( aPos[0] );
/* Update the data array and return the value */
aData[ aPos[1] ] = 'clicked';
this.innerHTML = 'clicked';
} );
/* Init DataTables */
oTable = $('#example').dataTable();
} );
上記のdatatables.netサイトからのストック回答は役に立たなかったので、質問には回答しませんでした。
Neko_imeは、選択されたアイテムの列に対応する列ヘッダー値を取得したいと考えています（これはおそらくテーブルの列名と同じか、ユーザーがテーブルヘッダーとデータベーステーブルの間のマッピングを持っているためです）。
ここでは、特定のセルのsTitle（列名の値）を取得する方法
（すべての行の最初の列に主キーがあり、ColReorderで移動可能な列を使用する場合でも、iFixedColumnsが1であるように、そのキーを最初の列に保持することに注意してください。データテーブルはoTableによって参照されます。セルDOM参照があり、これを以下の「ターゲット」と呼びます）：
var value = target.innerHTML;
var ret_arr = oTable.fnGetPosition( target ); // returns array of 3 indexes [ row, col_visible, col_all]
var row = ret_arr[0];
var col = ret_arr[1];
var data_row = oTable.fnGetData(row);
var primary_key = data_row[0];
var oSettings = oTable.fnSettings(); // you can find all sorts of goodies in the Settings
var col_id = oSettings.aoColumns[col].sTitle; //for this code, we just want the sTitle
// you now have enough info to craft your SQL update query. I'm outputting to alert box instead
alert('update where id="'+primary_key+'" set column "'+col_id+'" ('+row+', '+col+') to "'+value+'"');
ユーザーがテーブルのセルを編集できるようにするためにJEditableを使用しているので、これは私が自分で理解する必要があったものです。
上記のコードスニペットは、実際に私の特定の状況でこの問題を解決するのに役立ちました。これが私のコードです：
// My DataTable
var oTable;
$(document).ready(function() {
/* You might need to set the sSwfPath! Something like:
* TableToolsInit.sSwfPath = "/media/swf/ZeroClipboard.swf";
*/
TableToolsInit.sSwfPath = "../../Application/JqueryPlugIns/TableTools/swf/ZeroClipboard.swf";
oTable = $('#tblFeatures').dataTable({
// "sDom": '<"H"lfr>t<"F"ip>', // this is the standard setting for use with jQueryUi, no TableTool
// "sDom": '<"H"lfrT>t<"F"ip>', // this adds TableTool in the center of the header
"sDom": '<"H"lfr>t<"F"ip>T', // this adds TableTool after the footer
// "sDom": '<"H"lfrT>t<"F"ip>T', // this adds TableTool in the center of the header and after the footer
"oLanguage": { "sSearch": "Filter this data:" },
"iDisplayLength": 25,
"bJQueryUI": true,
// "sPaginationType": "full_numbers",
"aaSorting": [[0, "asc"]],
"bProcessing": true,
"bStateSave": true, // remembers table state via cookies
"aoColumns": [
/* CustomerId */{"bVisible": false },
/* OrderId */{"bVisible": false },
/* OrderDetailId */{"bVisible": false },
/* StateId */{"bVisible": false },
/* Product */null,
/* Description */null,
/* Rating */null,
/* Price */null
]
});
// uncomment this if you want a fixed header
// don't forget to reference the "FixedHeader.js" file.
// new FixedHeader(oTable);
});
// Add a click handler to the rows - this could be used as a callback
// Most of this section of code is from the DataTables.net site
$('#tblFeatures tr').click(function() {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
$(this).addClass('row_selected');
// Call fnGetSelected function to get a list of selected rows
// and pass that array into fnGetIdsOfSelectedRows function.
fnGetIdsOfSelectedRows(fnGetSelected(oTable));
}
});
function fnGetSelected(oTableLocal) {
var aReturn = new Array();
// fnGetNodes is a built in DataTable function
// aTrs == array of table rows
var aTrs = oTableLocal.fnGetNodes();
// put all rows that have a class of 'row_selected' into
// the returned array
for (var i = 0; i < aTrs.length; i++) {
if ($(aTrs[i]).hasClass('row_selected')) {
aReturn.Push(aTrs[i]);
}
}
return aReturn;
}
// This code is purposefully verbose.
// This is the section of code that will get the values of
// hidden columns in a datatable
function fnGetIdsOfSelectedRows(oSelectedRows) {
var aRowIndexes = new Array();
var aRowData = new Array();
var aReturn = new Array();
var AllValues;
aRowIndexes = oSelectedRows;
// The first 4 columns in my DataTable are id's and are hidden.
// Column0 = CustomerId
// Column1 = OrderId
// Column2 = OrderDetailId
// Column3 = StateId
// Here I loop through the selected rows and create a
// comma delimited array of id's that I will be sending
// back to the server for processing.
for(var i = 0; i < aRowIndexes.length; i++){
// fnGetData is a built in function of the DataTable
// I'm grabbing the data from rowindex "i"
aRowData = oTable.fnGetData(aRowIndexes[i]);
// I'm just concatenating the values and storing them
// in an array for each selected row.
AllValues = aRowData[0] + ',' + aRowData[1] + ',' + aRowData[2] + ',' + aRowData[3];
alert(AllValues);
aReturn.Push(AllValues);
}
return aReturn;
}
ここで、行をクリックした後にIDを取得する方法の例
$('#example tbody tr').live('click', function() {
var row = example .fnGetData(this);
id=row['id'];//or row[0] depend of situation
function(id);
});
テーブルのすべてのIDが必要な場合は、次のようなコードを使用する必要があります。
$(exampleTable.fnGetNodes()).each(function() {
var aPos = exampleTable.fnGetPosition(this);
var aData = exampleTable.fnGetData(aPos[0]);
aData[aPos[0]] = this.cells[0].innerHTML;
IdSet.Push(aData[aPos[0]]);
});
助けてください！
このような単純な質問は、優れた単純なjQueryソリューションに値します。
たとえば、IDが行0にあり、行5でアクションを実行するときにそのIDにアクセスするとします。
$('td:eq(5)').click(function (){
var id = $(this).parent().find('td:eq(0)').html();
alert('The id is ' + id);
});
これは、フィルターとページ結果にも機能することに注意してください。
@fbasに同意します。株式の回答はあまり役に立ちませんでした。
var oTable;
/* Get the rows which are currently selected */ function fnGetSelected(oTableLocal) { var aReturn = new Array(); var aTrs = oTableLocal.fnGetNodes(); for (var i = 0; i < aTrs.length; i++) { if ($(aTrs[i]).hasClass('row_selected')) { aReturn.Push(aTrs[i]); } } // console.log( aReturn); return aReturn; } $(function() { ///////////////// //btn_EditCustomer $('#btn_EditCustomer').on('click', function(e) { var anSelected = fnGetSelected(oTable); var rowData = oTable.fnGetData(anSelected[0]); console.log(rowData[0]); }); }); </script>
私の解決策は次のとおりです：1番目の列として主キーを持ちます-これは「可視」かどうかに設定できます。私の編集リンクと削除リンクは、行の最後の1列と最後の列にあります-それらには、それぞれ「編集」と「削除」のcssクラスがあります。次に、rowCallBackを使用して、次のような関数を呼び出します。
<!-- datatables initialisation -->
"rowCallback": function( row, data ) {
setCrudLinks(row, data);
}
function setCrudLinks(row, data) {
d = $(row).find('a.delete');
d.attr('href', d.attr('href')+'/'+data[0]);
e = $(row).find('a.edit');
e.attr('href', e.attr('href')+'/'+data[0]);
}
setCrudLinks（）は、主キー（data [0]）をリンクの最後に追加するだけです（必要なものは何でもかまいません）。これはテーブルレンダリングの前に発生するため、ページネーションでも機能します。
私は同じユースケースを持っていて、コードをdatatables.netプラグインにスピンオフすることになりました。リポジトリはこちらです DataTables CellEdit Plugin
基本的な初期化はすばやく簡単です。
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
myCallbackFunction = function (updatedCell, updatedRow) {
var columnIndex = cell.index().column;
var columnHeader = $(table.column(columnIndex).header()).html();
console.log("The header is: " + columnHeader);
console.log("The new value for the cell is: " + updatedCell.data());
}