javascript - jQuery DataTables <tbody> 未出现

Question

我是 jQuery DataTables API 的新手，我使用 jQuery DataTables API 在表中添加了一行。但是，为什么该部分不显示？我需要做什么才能让它显示在我添加到表中的每行中？

感谢您的帮助!

<table width='200px' style="table-layout: fixed" id="downlink-table-nameserver" border>
  <thead>
    <td>Server Port WWN</td>
    <td>Server Node Name</td>
    <td>Server Port Name</td>
    <td>Server Node Name</td>             
  </thead>
  <tbody>
    <tr>
      <td>
        <label for="connection-state"> Connection State </label>
        <div id="connection-state"></div>
      </td>
    </tr>
  </tbody>  
</table>

Javascript:

$(document).ready(function() {
    //$('#example').dataTable();

    var serverPortWwnTitle = 'Server Port WWN',
    serverNodeWwnTitle = 'Server Node WWN',
    serverPortNameTitle = 'Server Port Name',
    serverNodeNameTitle = 'Server Node Name';     

    var linkOptions = {
        "bPaginate" : false,
        "bFilter" : false,
        "bInfo" : false,
        "bAutoWidth" : false,
        "aaData" : [],
        "aaSorting": [[ 1, "alphanumeric-asc" ]],
        "aoColumns" : [
            {
                "sTitle" : serverPortWwnTitle,
                "sWidth" : "230px",
                "mDataProp" : "serverPortWwn",
                "sType" : "string"
            }, {
                "sTitle" : serverNodeWwnTitle,
                "sWidth" : "230px",
                "mDataProp" : "serverNodeWwn",
                "sType" : "string"
            }, {                        
                "sTitle" : serverPortNameTitle,
                "sWidth" : "230px",
                "mDataProp" : "serverPortName",
                "sType" : "string"
            }, {
                "sTitle" : serverNodeNameTitle,
                "sWidth" : "230px",
                "mDataProp" : "serverNodeName",
                "sType" : "string"
            }                        
        ]
    };


    var nameSvrTable = $('#downlink-table-nameserver').dataTable(linkOptions);  

    var connMapInfo = [];             

    connMapInfo.push({
        serverPortWwn: "portwwn",
        serverNodeWwn : "nodewwn",
        serverPortName: "portname",
        serverNodeName: "nodename"
    });                               

    nameSvrTable.fnClearTable();                        
    nameSvrTable.fnAddData(connMapInfo);                               


} );

Answer 1

首先尝试使用正确的 HTML 标记。添加<tr>至<thead>部分，然后使用 <th>而不是<td> <thead>里面。另外，<thead> 中的单元格数量和<tbody>部分应匹配，或使用 colspan="4"修复当前的标记问题。

<table width='200px' style="table-layout: fixed" id="downlink-table-nameserver" border>
<thead>
    <tr>
        <th>Server Port WWN</th>
        <th>Server Node Name</th>
        <th>Server Port Name</th>
        <th>Server Node Name</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td colspan="4">
            <label for="connection-state"> Connection State </label>
            <div id="connection-state"></div>
        </td>
    </tr>
</tbody>

这将是解决问题的良好开端。