Javascript 将子行添加为现有datatable中的嵌套datatable

我有一个数据表，其中列出了与针对个别员工执行的工作雇佣程序相关的若干“阶段”

我已经成功地编写了代码，以便表可以显示子行。我希望每个子行显示另一个datatable，该datatable将列出所选阶段的关联任务

到目前为止，我已经成功地添加并显示了带有表头的子行。请看这里： [儿童街][1]

我的HTML如下所示：

<div class="table-responsive">
<table class="table table-hover " id="stage_datatable">
    <thead>
        <tr>
            <th>Select</th>
            <th><!-- Detail --></th>
            <th>ID</th>
            <th>Stage</th>
            <th>Title</th>
            <th>Desc</th>
            <th>Date/Time</th>
            <th>Location</th>
            <th>Rep Required</th>
            <th>Logged By</th>
            <th>Date Logged</th>
        </tr>
    </thead>                      
</table>           

function getChildRow() {
var x = innerTaskTableTemplate(iTableCounter, taskTableTemplate());
return x;

function taskTableTemplate() {
return '<thead>'+
    '<tr>'+
        '<th>Select</th>'+
        '<th>ID</th>'+
        '<th>Task Title</th>'+
        '<th>Desc</th>'+
        '<th>Due Date/Time</th>'+
        '<th>Allocated To</th>'+
        '<th>Logged By</th>'+
        '<th>Date Logged</th>'+
    '</tr>'+
'</thead>'+
    '<tbody></tbody>';

function innerTaskTableTemplate(tableID, html) {
var sOut = "<div class='slider'><table id='task_table_" + tableID + "'>";
sOut += html;
sOut += "</table></div>";
console.log(sOut);

return sOut;

function loadMyTaskTable (action, id) {

$.ajax ( {
    url: './tasks/task_ajax.php',
    method: 'GET',
    data: {action: action, id:id}, // id could be taskID or caseID
    dataType: 'json',
    success: function (data) {
        console.log(data);
        var taskTable = $('#task_table_1')

        $(taskTable).DataTable ( {
            data:data,
            select: {
                style: 'os'
            },
            responsive: true,
            columns: [
                { 'data': null },
                { 'data': 'task_id' },
                { 'data': 'task_title' },
                { 'data': 'task_desc' },
                { 'data': 'task_due_date' },
                { 'data': 'allocated_to' },
                { 'data': 'logged_by' },
                { 'data': 'start_date' }
            ],
            "columnDefs": [ {
                "targets": -8,
                "data": null,
                "defaultContent": "<button class='btn btn-xs btn-primary'>Select</button>"
            }]
        }); 
        console.log("task table successfully loaded");  
    },
    failure: function (data) {
        console.log ("failed");
    }
});

getChildRow如下所示：

<div class="table-responsive">
<table class="table table-hover " id="stage_datatable">
    <thead>
        <tr>
            <th>Select</th>
            <th><!-- Detail --></th>
            <th>ID</th>
            <th>Stage</th>
            <th>Title</th>
            <th>Desc</th>
            <th>Date/Time</th>
            <th>Location</th>
            <th>Rep Required</th>
            <th>Logged By</th>
            <th>Date Logged</th>
        </tr>
    </thead>                      
</table>           

function getChildRow() {
var x = innerTaskTableTemplate(iTableCounter, taskTableTemplate());
return x;

function taskTableTemplate() {
return '<thead>'+
    '<tr>'+
        '<th>Select</th>'+
        '<th>ID</th>'+
        '<th>Task Title</th>'+
        '<th>Desc</th>'+
        '<th>Due Date/Time</th>'+
        '<th>Allocated To</th>'+
        '<th>Logged By</th>'+
        '<th>Date Logged</th>'+
    '</tr>'+
'</thead>'+
    '<tbody></tbody>';

function innerTaskTableTemplate(tableID, html) {
var sOut = "<div class='slider'><table id='task_table_" + tableID + "'>";
sOut += html;
sOut += "</table></div>";
console.log(sOut);

return sOut;

function loadMyTaskTable (action, id) {

$.ajax ( {
    url: './tasks/task_ajax.php',
    method: 'GET',
    data: {action: action, id:id}, // id could be taskID or caseID
    dataType: 'json',
    success: function (data) {
        console.log(data);
        var taskTable = $('#task_table_1')

        $(taskTable).DataTable ( {
            data:data,
            select: {
                style: 'os'
            },
            responsive: true,
            columns: [
                { 'data': null },
                { 'data': 'task_id' },
                { 'data': 'task_title' },
                { 'data': 'task_desc' },
                { 'data': 'task_due_date' },
                { 'data': 'allocated_to' },
                { 'data': 'logged_by' },
                { 'data': 'start_date' }
            ],
            "columnDefs": [ {
                "targets": -8,
                "data": null,
                "defaultContent": "<button class='btn btn-xs btn-primary'>Select</button>"
            }]
        }); 
        console.log("task table successfully loaded");  
    },
    failure: function (data) {
        console.log ("failed");
    }
});

}

taskTableTemplate参数如下所示：

<div class="table-responsive">
<table class="table table-hover " id="stage_datatable">
    <thead>
        <tr>
            <th>Select</th>
            <th><!-- Detail --></th>
            <th>ID</th>
            <th>Stage</th>
            <th>Title</th>
            <th>Desc</th>
            <th>Date/Time</th>
            <th>Location</th>
            <th>Rep Required</th>
            <th>Logged By</th>
            <th>Date Logged</th>
        </tr>
    </thead>                      
</table>           

function getChildRow() {
var x = innerTaskTableTemplate(iTableCounter, taskTableTemplate());
return x;

function taskTableTemplate() {
return '<thead>'+
    '<tr>'+
        '<th>Select</th>'+
        '<th>ID</th>'+
        '<th>Task Title</th>'+
        '<th>Desc</th>'+
        '<th>Due Date/Time</th>'+
        '<th>Allocated To</th>'+
        '<th>Logged By</th>'+
        '<th>Date Logged</th>'+
    '</tr>'+
'</thead>'+
    '<tbody></tbody>';

function innerTaskTableTemplate(tableID, html) {
var sOut = "<div class='slider'><table id='task_table_" + tableID + "'>";
sOut += html;
sOut += "</table></div>";
console.log(sOut);

return sOut;

function loadMyTaskTable (action, id) {

$.ajax ( {
    url: './tasks/task_ajax.php',
    method: 'GET',
    data: {action: action, id:id}, // id could be taskID or caseID
    dataType: 'json',
    success: function (data) {
        console.log(data);
        var taskTable = $('#task_table_1')

        $(taskTable).DataTable ( {
            data:data,
            select: {
                style: 'os'
            },
            responsive: true,
            columns: [
                { 'data': null },
                { 'data': 'task_id' },
                { 'data': 'task_title' },
                { 'data': 'task_desc' },
                { 'data': 'task_due_date' },
                { 'data': 'allocated_to' },
                { 'data': 'logged_by' },
                { 'data': 'start_date' }
            ],
            "columnDefs": [ {
                "targets": -8,
                "data": null,
                "defaultContent": "<button class='btn btn-xs btn-primary'>Select</button>"
            }]
        }); 
        console.log("task table successfully loaded");  
    },
    failure: function (data) {
        console.log ("failed");
    }
});

然而，如果我包括行，那么子行似乎消失了。如果我使用firebug检查DOM，我找不到我的子行，例如“task\u table\u 1”。见[此处][2]

loadMyTaskTable函数如下所示：

<div class="table-responsive">
<table class="table table-hover " id="stage_datatable">
    <thead>
        <tr>
            <th>Select</th>
            <th><!-- Detail --></th>
            <th>ID</th>
            <th>Stage</th>
            <th>Title</th>
            <th>Desc</th>
            <th>Date/Time</th>
            <th>Location</th>
            <th>Rep Required</th>
            <th>Logged By</th>
            <th>Date Logged</th>
        </tr>
    </thead>                      
</table>           

function getChildRow() {
var x = innerTaskTableTemplate(iTableCounter, taskTableTemplate());
return x;

function taskTableTemplate() {
return '<thead>'+
    '<tr>'+
        '<th>Select</th>'+
        '<th>ID</th>'+
        '<th>Task Title</th>'+
        '<th>Desc</th>'+
        '<th>Due Date/Time</th>'+
        '<th>Allocated To</th>'+
        '<th>Logged By</th>'+
        '<th>Date Logged</th>'+
    '</tr>'+
'</thead>'+
    '<tbody></tbody>';

function innerTaskTableTemplate(tableID, html) {
var sOut = "<div class='slider'><table id='task_table_" + tableID + "'>";
sOut += html;
sOut += "</table></div>";
console.log(sOut);

return sOut;

function loadMyTaskTable (action, id) {

$.ajax ( {
    url: './tasks/task_ajax.php',
    method: 'GET',
    data: {action: action, id:id}, // id could be taskID or caseID
    dataType: 'json',
    success: function (data) {
        console.log(data);
        var taskTable = $('#task_table_1')

        $(taskTable).DataTable ( {
            data:data,
            select: {
                style: 'os'
            },
            responsive: true,
            columns: [
                { 'data': null },
                { 'data': 'task_id' },
                { 'data': 'task_title' },
                { 'data': 'task_desc' },
                { 'data': 'task_due_date' },
                { 'data': 'allocated_to' },
                { 'data': 'logged_by' },
                { 'data': 'start_date' }
            ],
            "columnDefs": [ {
                "targets": -8,
                "data": null,
                "defaultContent": "<button class='btn btn-xs btn-primary'>Select</button>"
            }]
        }); 
        console.log("task table successfully loaded");  
    },
    failure: function (data) {
        console.log ("failed");
    }
});

}

请你告诉我哪里出了问题。我相信我的AJAX工作得很好，因为我已经尝试将任务表html添加到主页面上，并且它以这种方式正确加载，但当我在datatable中动态地将其作为子行插入时，情况就不一样了

我曾尝试查看类似的其他帖子，例如[click here][3]，但我认为该代码已被datatables新API取代

非常感谢

附加细节 我已调试该脚本并发现以下内容：

脚本成功地插入了带有任务表的子行

子行一旦成功加载到*console.logtask表中，就会从DOM中删除；*我的loadMyTaskTable函数中的行

---

我仍然不确定我在这里做错了什么。

我只是有一个肤浅的想法，但这可能会有所帮助：您是否意识到，只要调用loadMyTaskTable，loadStageTable的其余部分就会在loadMyTaskTable真正完成其工作之前执行？谢谢您的回复-非常感谢。但是loadMyTaskTable函数下面的代码只是添加红色关闭图像，并将动画应用到表所在的div。这都是事件函数的一部分，所以我不认为这是问题所在，但我可能错了。非常感谢您提供的任何进一步见解，因为我花了很长时间毫无乐趣地寻找解决方案。好的。你试过调试吗？您应该首先在loadMyTaskTable前面放置一个断点，以控制重影行的存在，然后在后面放置另一个断点，以强制不进一步删除它。从这里开始，在loadMyTaskTable中的某个位置放置另一个断点，查看该行是否已消失，如果是，则将断点向上移动，如果否，则向下移动，依此类推……谢谢。我明天就试试。赞赏如果不足以修复，请随时再来。我只是有一个肤浅的想法，但这可能会有所帮助：您是否意识到，只要调用loadMyTaskTable，loadStageTable的其余部分就会在loadMyTaskTable真正完成其工作之前执行？谢谢您的回复-赞赏。但是loadMyTaskTable函数下面的代码只是添加红色关闭图像，并将动画应用到表所在的div。这都是事件函数的一部分，所以我不认为这是问题所在，但我可能错了。非常感谢您提供的任何进一步见解，因为我花了很长时间毫无乐趣地寻找解决方案。好的。你试过调试吗？您应该首先在loadMyTaskTable前面放置一个断点，以控制重影行的存在，然后在后面放置另一个断点，以强制不进一步删除它。从这里开始，在loadMyTaskTable中的某个位置放置另一个断点，查看该行是否已消失，如果是，则将断点向上移动，如果否，则向下移动，依此类推……谢谢。我明天就试试。如果不足以修复，请随时再来。