jQuery - 数据表，如何获取列 ID

Posted 2023-05-07

【中文标题】jQuery - 数据表，如何获取列 ID

【英文标题】：jQuery - datatables, how to get column id

【发布时间】：2011-01-23 22:55:28

【问题描述】：

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

【问题讨论】：

那么您必须告诉我们您拥有哪些数据才能获得列 ID :)

【参考方案1】：

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

【参考方案2】：

我认为上面来自 datatables.net 网站的股票答案没有帮助，也没有回答问题。

相信neko_ime是想获取选中项的列对应的列头值（因为这很可能和表中的列名相同，或者用户有表头和数据库表的映射关系） )。

这是获取给定单元格的标题（列名值）的方法

（请注意，我在每一行的第一列中都有我的主键，并确保即使使用带有 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 来允许用户编辑表格中的单元格。

【参考方案3】：

上面的代码 sn-p 实际上帮助我针对我的特定情况解决了这个问题。这是我的代码：

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

【讨论】：

这个是针对jquery数据表中隐藏列的值，但自然可以获取数据表中任意列的值。

超级有用的代码！谢谢！

【参考方案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]]);
);

希望有帮助！

【讨论】：

抱歉，问题是关于列 ID，而不是行

【参考方案5】：

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

假设您的 id 在第 0 行 例如，您希望在对第 5 行执行操作时访问它

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

请注意，这也适用于过滤器和分页结果。

我同意 @fbas 的观点，股票的答案并没有真正的帮助。

【讨论】：

这让我沉默了一段时间，我想当我们程序员（好吧，也许只有我）看到插件和库时，我们认为解决问题的方法就在那里

相同的评论，但问题是关于列 ID，而不是行

【参考方案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]);
    );
);  </script>

【讨论】：

对不起，总是同样的评论，但问题是关于列 id，而不是行

【参考方案7】：

我的解决方案如下：将主键作为第一列 - 这可以设置为“可见”或不设置。我的编辑和删除链接位于该行的最后一列和最后一列 - 它们分别具有“编辑”和“删除”的 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]) 附加到链接 href 的末尾（可能需要的任何内容）。这发生在表格渲染之前，因此也适用于分页。

【参考方案8】：

我有相同的用例，最终将我的代码转变成一个 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());