Question

请附上申请图片，其中未显示ORDER ID列，而不是显示PLUS标志。因此，所有列都应该向右移动一个。

ajax 在我运行应用程序时，它会向我显示以下错误消息：

DataTables warning（table id ='companies'）：添加的数据（大小3）与已知列数不匹配（4）

   var oTable;
    $('#companies tbody td img').live('click', function () {
    var nTr = this.parentNode.parentNode;
    if (this.src.match('details_close')) {
    /* This row is already open - close it */
    this.src = "/Content/images/details_open.png";
    oTable.fnClose(nTr);
    }
    else {
    /* Open this row */
    this.src = "/Content/images/details_close.png";
    var orderid = $(this).attr("rel");
    $.get("Me?OrderID=" + orderid, function (detalet) {
    oTable.fnOpen(nTr, detalet, 'details');
    });
    }
    });

    /* Initialize table and make first column non-sortable*/
    oTable = $('#companies').dataTable({
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": 'AjaxHandler',
    "bJQueryUI": true,
    "aoColumns":
     [
    { "bSortable": false, 
    "bSearchable": false,
    "fnRender": function (oObj)
     {
    return '<img src="/Content/images/details_open.png" alt="expand/collapse" rel="' + oObj.aData[0] + '" />';
    }
    },
    null,
    null,
    null
    ]
    });

 <table id="companies" class="display">
        <thead>
            <tr>
                <th> </th>
                <th>Order  ID</th>


                <th>Customer ID</th>
              
                <th>Ship Address</th>
        
            </tr>
        </thead>
        <tbody></tbody>
    </table>

Answer 1

您应该在 aoColumns 定义中指定列号，例如：

<table id="companies" class="display">
    <thead>
        <tr>
            <th></th>
            <th>Order  ID</th>
            <th>Customer ID</th>             
            <th>Ship Address</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

HTML标记：

<link rel="stylesheet" type="text/css" href="mystyle.css">

Answer 2

对aoColumns使用以下结构：

"aoColumns": [
    { 
       "mData": 0,
       "bSortable": false, 
       "bSearchable": false,
       "mRender": function (data, type, full){
          return '<img src="/Content/images/details_open.png" alt="expand/collapse" rel="' + data + '" />';
       }
    },
    { "mData": 1 },
    { "mData": 2 },
    { "mData": 3 }
]

使用以下HTML标记：

<table id="companies" class="display">
    <thead>
        <tr>
            <th>Order ID</th>
            <th>Customer ID</th>             
            <th>Ship Address</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

aoColumns的数据表无法正常工作

2 个答案: