javascript - 实时数据表记录，显示带有类的数据，并且数据绑定(bind)涉及表行或 td

Question

我正在使用datatables我遇到了一个 self 需求，我想要一个实时表数据，并且我使用数据表来满足此需求，但是在将从服务器提取的数据显示到表时遇到问题。我当然可以使用:

$('#ua_table').DataTable().row.add(['Sample name', 'Sample address', 'Sample Job', 'Sample Contact', 'xx', 'xx', 'xx', 'xx', '<button>asd</button>']).draw();

在每个函数的帮助下用新数据填充表 tbody，但问题是每个表行 (tr) 中都涉及数据绑定(bind)和类，并且也可能在 td 中。如何通过数据绑定(bind)或类向每个 tr 或 td 显示新数据？像这样(引用下文)

<tr class="' + value.holder + '" class="' + value.classes + '"><td>' + value.name + '</td><td>' + value.address + '</td><td>' + value.job + '</td><td>' + value.contact + '</td></tr>

任何想法、线索、建议、推荐、帮助都将不胜感激。谢谢!

$(document).ready(function(){
  $('#ua_table').DataTable({
        "pagingType": "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"
        }
    });
  
  $(".load").click(function(){
    $('#ua_table').dataTable().fnClearTable(); //clear the table first
    $.post("/test", { id: "1" }, function(response){ //pull the new data
            if(response.success){
                var bbr = $("#ua_table tbody");
                bbr.html("");
                $.each(response.persons, function(index, value){
                    bbr.append('<tr class="' + value.holder + '" class="' + value.classes + '"><td>' + value.name + '</td><td>' + value.address + '</td><td>' + value.job + '</td><td>' + value.contact + '</td></tr>');
                });
                                
            }
        }, 'json');
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>


<table class="table" id="ua_table">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Job</th>
    <th>Contact</th>
  </thead>
  <tbody>
    <tr>
      <td>Sample name 1</td>
      <td>Sample address 1</td>
      <td>Sample job 1</td>
      <td>Sample contact 1</td>
    </tr>
    <tr>
      <td>Sample name 2</td>
      <td>Sample address 2</td>
      <td>Sample job 2</td>
      <td>Sample contact 2</td>
    </tr>
    <tr>
      <td>Sample name 3</td>
      <td>Sample address 3</td>
      <td>Sample job 3</td>
      <td>Sample contact 3</td>
    </tr>
  </tbody>
 </table>

<button class="load">Load ajax</button>

Answer 1

您可以使用createdRow选项来定义一个回调函数，当创建新行以设置类、添加事件处理程序等时将调用该回调函数。

请参阅下面的示例，了解如何为 <tr> 设置类别。和<td>元素。

$(document).ready(function(){
  $('#ua_table').DataTable({
        "pagingType": "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"
        },
        "columns": [
            { "data": "name" },
            { "data": "address" },
            { "data": "job" },
            { "data": "contact" }
        ],
        "createdRow": function( row, data, dataIndex ) {
           $(row).addClass(data.classes);  
          
           $('td:eq(2)', row).addClass(data.holder);
        }
    });
  
  $(".load").click(function(){
    $('#ua_table').DataTable().clear();
    
/*    
    $.post("/test", { id: "1" }, function(response){ //pull the new data
            if(response.success){
                var bbr = $("#ua_table tbody");
                bbr.html("");
                $.each(response.persons, function(index, value){
                    bbr.append('<tr class="' + value.holder + '" class="' + value.classes + '"><td>' + value.name + '</td><td>' + value.address + '</td><td>' + value.job + '</td><td>' + value.contact + '</td></tr>');
                });
                                
            }
        }, 'json');
*/
     $('#ua_table').DataTable().row.add(
       {
         name:'Sample name', 
         address: 'Sample address', 
         job: 'Sample Job', 
         contact: 'Sample Contact', 
         holder: 'error', 
         classes: 'warning'
       }
     ).draw();
  });
  
  
});

td.error { 
  background-color:#FCC !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>


<table class="table" id="ua_table">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Job</th>
    <th>Contact</th>
  </thead>
  <tbody>
    <tr>
      <td>Sample name 1</td>
      <td>Sample address 1</td>
      <td>Sample job 1</td>
      <td>Sample contact 1</td>
    </tr>
    <tr>
      <td>Sample name 2</td>
      <td>Sample address 2</td>
      <td>Sample job 2</td>
      <td>Sample contact 2</td>
    </tr>
    <tr>
      <td>Sample name 3</td>
      <td>Sample address 3</td>
      <td>Sample job 3</td>
      <td>Sample contact 3</td>
    </tr>
  </tbody>
 </table>

<button class="load">Load ajax</button>

但是，我认为您不必使用单独的 $.post , clear()和row.add() 。 DataTables 自行处理 Ajax 来源的数据，请参阅 Ajax data source (objects)例子。您需要做的就是使用 ajax.reload()必要时重新加载数据。