我的html页面中有一个现有的jQuery dataTables对象。
我需要通过点击刷新按钮来更新数据表的第一个<a href>上的所有<td>中的一些<tr>元素，该按钮会触发Ajax调用以检索新数据在JSON。
<a href>元素是使用Ajax检索的超链接动态构造的，因此我需要为每个<a href>元素提供html。
<tr id="LoJXi76DH3" role="row" class="odd">
<td><a data-transition="pop" data-mini="true" data-position-to="window" data-rel="popup" href="#deleteThisRunModel" onclick="copyRunModelObjId("LoJXi76DH3");" title="Delete this job"><img width="16" height="16" src="css/img/Remove24.png"></a></td>
<td><span>LoJXi76DH3</span></td>
<td><span>500</span></td>
<td><span>Completed</span></td>
<td><span>Firstname Lastname</span></td>
<td><span>9/12/2015, 1:07:39 PM</span></td>
<td><span>9/12/2015, 1:18:47 PM</span></td>
<td><span>Successful</span><span> </span><a title="Details" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" data-transition="pop" data-rel="popup" href="#popupRMDetails_LoJXi76DH3">Details</a></td>
<td><a target="_blank" href="View.jsp?res=500&url=myImage.png">View</a><span> </span><a href="myServlet?action=exportForDownload&jobOID=LoJXi76DH3">Download</a></td>
</tr>
只是想知道我应该使用哪个函数/ api来完成这个工作？
答案 0 :(得分：2)
如果您想用全新的<tr>..</tr>替换整个<tr>，可以执行以下操作。
首先在jQuery中找到要替换的行，或者使用一些id选择器，或者通过DOM遍历来自这样的事件：
var $row = $(this).closest("tr")
我们假设您有一个全新的HTML行，您希望将其替换为。这可能来自一个AJAX调用，在页面的某个地方，或现有行的修改版本，或者只是直接的HTML：
var newRow = $("<tr> <td>1</td> <td>Bob</td> <td><i>23</i></td> <tr>
如果这是一个简单的HTML表格，你可以这样做.replaceWith()：
$row.replaceWith($(newRow))
Buutttt，然后DataTables并不知道，所以下次你致电$dt.draw()时，它会改回来。相反，您必须通过在DataTables中查找行然后将新信息传递给DataTable来将新信息传递到DataTable。
的
row().data()- 数据表示每个innerHTMLtd字符串值数组
所以我们需要将上面的行转换成这样的东西：
["1","Bob","<i>23</i>"]
这是一个将行转换为数据表数组的函数：
function TrToData(row) {
return $(row).find('td').map(function(i,el) {
return el.innerHTML;
}).get();
}
所以整件事情看起来像这样：
$('.replace').click(function () {
var $row = $(this).closest("tr")
var newRow = $("#newRow").find("tr")[0].outerHTML
var newRowDataArray = TrToData(newRow)
$dt.row($row).data(newRowDataArray).draw();
});
$(function() {
// initialize table
var $dt = $('#example').DataTable({
paging: false,
bFilter: false,
bInfo: false
});
// add row
$('#addRow').click(function () {
//$dt.row.add( [1,2,3] ).draw();
var newRow = $("#newRow").find("tr")[0].outerHTML
$dt.row.add($(newRow)).draw();
});
// replace row
$('.replace').click(function () {
var $row = $(this).closest("tr")
var newRow = $("#newRow").find("tr")[0].outerHTML
var newRowDataArray = TrToData(newRow)
//$row.replaceWith($(newRow))
//data represents an array of string values that are the innerHTML of each td
$dt.row($row).data(newRowDataArray).draw();
});
function TrToData(row) {
return $(row).find('td').map(function(i,el) {
return el.innerHTML;
}).get();
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js"></script>
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<th>Hidden</th>
<th>Name</th>
<th>Age</th>
<th>Replace</th>
</tr>
</thead>
<tbody>
<tr>
<td>Line 1 <input type="hidden" value="1"/> </td>
<td>Bob <input type="hidden" value="Bob"/> </td>
<td><input type="text" value="18"/> </td>
<td><input type="button" value="Replace" class="replace"/> </td>
</tr>
</tbody>
</table>
<br/>
<button id="addRow">Add New Row</button>
<table id="newRow" style="display:none">
<tbody>
<tr >
<td>Line 2 <input type="hidden" value="2"/> </td>
<td>Ann <input type="hidden" value="Ann"/> </td>
<td><input type="text" value="21"/> </td>
<td><input type="button" value="Replace" class="replace"/> </td>
</tr>
</tbody>
</table>
答案 1 :(得分：0)
您可以使用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（）函数将通过ajax调用获取数据并进行操作来每20秒触发一次。 这里data-table引用表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>" >