如何使用现有 JQuery 数据表上的 HTML 更新现有行？

Question

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

我需要通过单击触发 Ajax 调用以检索 JSON 中的新数据的刷新按钮来更新第一个数据表<a href>上所有<td>s 中的一些元素<tr>。

这些<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(&quot;LoJXi76DH3&quot;);" 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&amp;url=myImage.png">View</a><span> </span><a href="myServlet?action=exportForDownload&amp;jobOID=LoJXi76DH3">Download</a></td>
</tr>

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

Answer 1

如果您想<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))

Butttt，然后 DataTables 不知道它，所以下次您调用 时$dt.draw()，它会变回来。相反，您必须通过在 DataTables 中定位行然后将新信息传递给它来将新信息传递到 DataTable。

row().data()- 数据表示innerHTML每个字符串值的数组td

所以我们需要将上面的行转换成这样：

["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();
});

jsFiddle 中的演示

堆栈中的恶魔片段

$(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>