jQuery – datatables，如何获取列id

如何在jquery的datatable插件中获取列id我需要在数据库中进行更新的列id。

Answer 1

fnGetPosition

从它的DOM元素中获取特定单元格的数组索引。 最好与fnGetData（）结合使用。

输入参数：

nNode：您要查找其位置的节点。 这可以是表格中的“TR”行或“TD”单元格。 返回参数取决于此输入。

返回参数：

int或array [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

Answer 2

我认为从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来允许用户编辑表格中的单元格。

Answer 3

上面的代码片段实际上帮助我解决了我的特殊情况。 这是我的代码：

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

Answer 4

这是一个如何在单击行后获取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]]); }); 

希望有所帮助

Answer 5

这样一个简单的问题值得一个简单的jQuery解决方案。

假设您的id在第0行，并且您想要在第5行执行操作时访问它

 $('td:eq(5)').click(function (){ var id = $(this).parent().find('td:eq(0)').html(); alert('The id is ' + id); }); 

请注意，这也适用于filter和分页结果。

我同意@fbas的回答并不是很有用。

Answer 6

变量;

 /* 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]); }); });  

Answer 7

我的解决方案如下：将主键作为第一列 – 可以将其设置为“可见”或不是。 我的编辑和删除链接位于行的最后一列和最后一列中 – 它们分别具有’edit’和’delete’的css类。 然后使用rowCallBack，调用这样的函数：

  "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]）附加到链接href的末尾（无论可能需要什么）。 这种情况发生在表格渲染之前，因此也适用于分页。

Answer 8

我有相同的用例，最后将我的代码转换为datatables.net插件。 回购邮件在这里： DataTables CellEdit插件

基本初始化快速简便：

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