如何将带有动态数据的选择元素添加到 datatables.net 表中？

问题描述

我正在尝试从数据表版本 1.10.23 中向数据表中的每一行添加一个选择下拉列表。我的表数据和选择数据都来自返回 JSON 的 API。我有一个单独的函数来获取选择数据，在 JS 中构建所选元素并返回整个元素。通常我可以将它附加到一个 div 没问题，但是当我尝试添加到我的数据表时，我得到：[object HTMLSelectElement] 在我的表中而不是实际的选择元素。

代码：

    async function buildrentalReturnTable() {

    // table data
    let rentalData = await getRentalDetails();
   
    if ($.fn.DataTable.isDataTable('#rentalReturnTable')) {
        $('#rentalReturnTable').DataTable().destroy();
    }
    // returns whole  selected element with options populated from API 
    let selectElement = await buildStatusDDL();  

    $("#rentalReturnTable").DataTable({
        "destroy": true,"data": rentalData,"dom": '<"top"i<"clear">><"top d-flex justify-content-between pt-1"lf>rt<"bottom pt-2"p>',"fixedHeader": true,"scrollY": "50vh","scrollCollapse": true,"oLanguage": {
            "sEmptyTable": "No results found","sSearch": "Filter Results:"
        },"columnDefs": [{
            "targets": 0,"orderable": false
        }],"order": [[1,'asc']],"columns": [
            {
                "data": function (data) {                    
                    return selectElement
                },"title": "Status"

            },{ "data": "RentalLPID","title": "RentalLPID" },{ "data": "SKU","title": "SKU" },{ "data": "Description1","title": "Description1" },{ "data": "NextRentalDate","title": "NextRentalDate" },],"pagingType": "full_numbers","lengthMenu": [
            [10,25,50,-1],[10,"All"]
        ],responsive: true
    });
}

UI example

有什么建议吗？

解决方法

您需要 HTML 元素的文本（字符串） - 而不是元素本身（它是一个对象）。试试：

return selectElement.outerHTML

有关文档，请参阅 here。

datatables javascript