Javascript 如何在现有JQuery数据表上用HTML更新现有行？

我的html页面中有一个现有的jQuery dataTables对象

我需要更新一些

LoJXi76DH3
500
完整的
姓
2015年12月9日下午1:07:39
2015年9月12日下午1:18:47
成功的

---

只是想知道应该使用哪个函数/api来完成这项工作？

您可以使用jQuery来更新指定的行。为此，您需要为每一行定义唯一的id。然后，通过以下id，您可以获得table元素的对象，并通过ajax调用对其进行更新。让我用代码来解释。这里还显示了如何操作动态链接

function updateJobStatus() {
        $("#data-table tr.running").each(function() {
            var obj = $(this);
            var id = $(this).find('td:eq(0)').text();
            //var id1 = $(this).attr('id');
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: 'ajaxGetPrintJob.html',
                data: 'id=' + id,
                success: function(responseData,textStatus) {
                    if (textStatus == 'success' && responseData.length > 0) {
                        var id = responseData[0].id;
                        var tagId = responseData[0].voterListTagId;
                        var createdBy = responseData[0].createdByName;
                        var locationType = responseData[0].locationType;
                        var totalJobCount = responseData[0].totalJobCount;
                        var successCount = responseData[0].successCount;
                        var failedCount = responseData[0].failedCount;
                        var status = responseData[0].status;
                        $(obj).find('td:eq(0)').html(id);
                        $(obj).find('td:eq(1)').html('<input name="app_id" id="row'+id+ '" type="checkbox" value="'+id+'" class="case"/>');
                        $(obj).find('td:eq(2)').html('<a href="showPrintJob.html?jobId='+id+'&tagId='+tagId+'&locationType='+locationType+'&w=1024&h=700&load=true&jobName='+responseData[0].name+'" class="popup">'+responseData[0].name+'</a>');
                        $(obj).find('td:eq(3)').html(createdBy);
                        $(obj).find('td:eq(4)').html(totalJobCount);
                        $(obj).find('td:eq(5)').html(successCount);
                        $(obj).find('td:eq(6)').html(failedCount);
                        $(obj).find('td:eq(7)').html(status);

                    }
                }, error: function(responseData) {
                    unblockView();
                }
            });

        });
        setTimeout(updateJobStatus, 20000);
    }

函数updateJobStatus（）{
$（“#数据表tr.running”）。每个（函数（）{
var obj=$（本）；
var id=$（this.find（'td:eq（0）'）.text（）；
//var id1=$（this.attr（'id'）；
$.ajax({
键入：“GET”，
数据类型：“json”，
url:'ajaxGetPrintJob.html'，
数据：“id=”+id，
成功：功能（响应数据、文本状态）{
如果（textStatus='success'&&responseData.length>0）{
var id=responseData[0].id；
var tagId=responseData[0]。voterListTagId；
var createdBy=responseData[0]。createdByName；
var locationType=responseData[0]。locationType；
var totalJobCount=responseData[0]。totalJobCount；
var successCount=responseData[0]。successCount；
var failedCount=响应数据[0]。failedCount；
var状态=响应数据[0]。状态；
$（obj）.find（'td:eq（0）'）.html（id）；
$（obj）.find（'td:eq（1）'）.html（''）；
$（obj）.find（'td:eq（2）'）.html（“”）；
$（obj）.find（'td:eq（3）'）.html（createdBy）；
$（obj）.find（'td:eq（4）'）.html（totalJobCount）；
$（obj）.find（'td:eq（5）'）.html（successCount）；
$（obj）.find（'td:eq（6）'）.html（failedCount）；
$（obj）.find（'td:eq（7）'）.html（状态）；
}
}，错误：函数（响应数据）{
解除锁定视图（）；
}
});
});
setTimeout（updateJobStatus，20000）；
}

这里updateJobStatus（）函数将通过ajax调用获取数据并进行操作每20秒触发一次。 这里数据表指的是表id

<table summary="search result" id="data-table" class="search-result" cellspacing="0" style="">

表行应该是这样的

<tr class="<c:if test="${loop.count % 2 !=0}"> odd-row </c:if> <c:if test="${result.status eq 'INITIALIZING'}"> running </c:if>" > 

---

如果要将整个

。

替换为全新的或经过修改的

，可以执行以下操作

首先，在jQuery中找到要替换的行，可以使用一些id选择器，也可以通过如下事件的DOM遍历：

var$row=$（this）.closest（“tr”）

假设您有一个全新的HTML行，您希望将其替换为。这可能来自页面上某个地方的AJAX调用，或者现有行的修改版本，或者只是纯HTML：

var newRow=$（“1.23

如果这是一个普通的HTML表，您可以这样做：

$row.replaceWith（$（新行））

Buutttt，那么DataTables不知道它，所以下次调用时，它会变回。相反，您必须通过在DataTables中定位行，然后将新信息传递给DataTable，从而将新信息传递给DataTable

-数据表示字符串值数组，这些字符串值是每个

td

的

innerHTML

因此，我们需要将上述行转换为如下内容：

[“1”、“鲍勃”、“23”]

下面是一个将行转换为数据表数组的函数：

函数TrToData（行）{
返回$（行）.find（'td'）.map（函数（i，el）{
返回el.innerHTML；
}).get（）；
}

所以整个事情看起来是这样的：

$（'.replace'）。单击（函数（）{
var$row=$（this）.closest（“tr”）
var newRow=$（“#newRow”）.find（“tr”）[0]。outerHTML
var newRowDataArray=TrToData（newRow）
$dt.row（$row）.data（newRowDataArray.draw（）；
});

堆栈中的Demon片段

$（函数（）{
//初始化表
var$dt=$（“#示例”）.DataTable({
分页：false，
过滤：错，
宾福：错
});
//添加行
$（'#addRow'）。单击（函数（）{
//$dt.row.add（[1,2,3]）.draw（）；
var newRow=$（“#newRow”）.find（“tr”）[0]。outerHTML
$dt.row.add（$（newRow））.draw（）；
});
//替换行
$（'.replace'）。单击（函数（）{
var$row=$（this）.closest（“tr”）
var newRow=$（“#newRow”）.find（“tr”）[0]。outerHTML
var newRowDataArray=TrToData（newRow）
//$row.replaceWith（$（新行））
//数据表示字符串值数组，这些字符串值是每个td的innerHTML
$dt.row（$row）.data（newRowDataArray.draw（）；
});
函数TrToData（行）{
返回$（行）.find（'td'）.map（函数（i，el）{
返回el.innerHTML；
}).get（）；
}
})；

隐藏的
名称
年龄
代替
第1行
上下快速移动


添加新行
第2行
安

谢谢Ataur。但我尝试使用JQuery在表不起作用之前更新它。这不会更新Datatables行：（当您使用ajax调用时，是否可以检查您是否正在拉取相同的数据库对象并再次将其显示在表中？无论采用哪种方式，您都不应该在不使用API的情况下操作dataTable的内容。即使它似乎起到了作用，在重新绘制后，任何更改都将丢失，因为dataTables不知道这些更改。dataTables保留所有可以在内部变量中保存数据，并且不检查表是否以某种方式存在

<tr class="<c:if test="${loop.count % 2 !=0}"> odd-row </c:if> <c:if test="${result.status eq 'INITIALIZING'}"> running </c:if>" >