如何使用 JavaScript 将 DataTable 中的行数据作为函数参数传递？-解网

问：

目的是在单击每行的按钮以执行另一个函数时获取行数据。我尝试使用 Onclick 但没有成功。

下面是我的JavaScript

    function populateDataTable(data) {

    
    console.log("populating data table...");

    // clear the table before populating it with more data
    $("#tabela1").DataTable().clear();
    var length = Object.keys(data).length;
    console.log("Object length is " + length)
    for(let i = 0; i < length; i++) {
    var dataTable = data[i]; // data is json parsed

    var actStatus = '<td class="align-middle situation" style="display: table-cell;" tabindex="0"><span class="badge badge-primary">'+dataTable.status+'</span></td>'
    var viewBtn = '<td class="align-middle moreOptions" style="display: table-cell;"><span tooltip="details" title=""><a class="fa fa-eye grey-text" data-placement="top" data-toggle="modal" href="#" onClick="actvDetails('+this.dataTable+')" data-backdrop="false"></a></span></td></tr>' 

    $('#tabela1').dataTable().fnAddData( [
            dataTable.id, 
            dataTable.number, 
            dataTable.limit,
            actStatus,
            dataTable.last_updated,
            viewBtn,
    ]);
    }
}

function actvDetails(dataTable) {
    console.log(dataTable);
    // process row data here
}

这是我的行详细信息

    {
    "id": 25,
    "number": "222222222",
    "sid": "4514585554578112",
    "code": "2545",
    "limit": "capped",
    "addon": "No Addon",
    "type": "admin",
    "comments": "Testing ",
    "requestor_id": "1255",
    "occ": "null",
    "status": "processing",
    "last_updated": "2023-02-12"
}

JavaScript jQuery 数据表 OnClick 参数传递

我会@ramin注释中补充一点，您的代码中的注释也说变量 dataTable 被解析为 json，但后来在代码中您尝试将其用作字符串它不起作用，因为对象被转换为字符串，例如.在将值用作字符串之前，您必须将该值字符串化。var dataTable = data[i]; // data is json parsedonClick="actvDetails('+dataTable+')"[object Object]onClick="actvDetails('+JSON.stringify(dataTable)+')"

0赞 Adam 2/13/2023

@ramin由于编辑器的限制，我无法添加html表。我尝试了actvDetails（'+dataTable+'），但没有成功。

0赞 Adam 2/13/2023

我试过了，但在执行该函数时，我在onClick="actvDetails('+JSON.stringify(dataTable)+')"function actvDetails(dataTable) {console.log(dataTable);}actvDetails({

答：

0赞 Adam 2/13/2023 #1

想出了一个解决方案。

这会将传递的变量转换为用逗号分隔的一行字符串

var viewBtn = '<td class="align-middle moreOptions" style="display: table-cell;"><span tooltip="details" title=""><a class="fa fa-eye grey-text" data-placement="top" data-toggle="modal" href="#" onClick="actvDetails(\''+dataTable.id+', '+dataTable.number+', '+dataTable.limit+', '+dataTable.status+', '+dataTable.last_updated+', \')" data-backdrop="false"></a></span></td></tr>'

然后在 JavaScript 中，我使用了 split

function actvDetails(passedData) {
  console.log(typeof passedData);

  console.log(passedData);
  var rowDetailsArray = passedData.split(", ") ;
  console.log(rowDetailsArray);
}

上一个：将参数传递到内联函数数组中

下一个：将变量传递给 jquery 模态弹出窗口

如何使用 JavaScript 将 DataTable 中的行数据作为函数参数传递？

How can I pass row data from DataTable as a function parameter with JavaScript?

评论