Question

我正在使用datatables我遇到了自我要求，我想要一个实时表数据，我使用数据表来满足这个要求，但是当从服务器向表中显示拉出数据时我遇到了问题。当然我可以使用：

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

在每个函数的帮助下使用新数据填充表tbody，但问题是存在数据绑定，并且每个表行（tr）中涉及类，并且可能也在td中。如何使用数据绑定或类向每个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>元素设置类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

实时数据表记录，显示包含类和数据绑定的数据包含在表行或td中

1 个答案: