如何向 jQuery 数据表中添加额外的列答案

【问题标题】：How to add extra columns to jQuery datatable如何向 jQuery 数据表中添加额外的列
【发布时间】：2014-01-27 20:09:44
【问题描述】：

有谁知道如何在 jQuery 数据表中添加额外的列？我有一个包含五列的 jQuery 数据表，我想添加两个额外的列。

<table class="table table-bordered table-striped table_vam" id="dt_gal">
    <thead>
        <tr>
            <th class="table_checkbox">
                <input type="checkbox" name="select_rows" class="select_rows" data-tableid="dt_gal" />
            </th>
            <th>Product Name</th>
            <th>Product Code</th>
            <th>Description</th>
            <th>Start Price</th>
            <th>Reg Fee</th>
            <th>DateCreated</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach var="product" items="${PRODUCTS}">
            <tr>
                <td>
                    <input type="checkbox" name="row_sel" class="row_sel" />
                </td>
                <td>${product.productname}</td>
                <td>${product.code}</td>
                <td>${product.description}</td>
                <td>${product.startPrice}</td>
                <td>${product.registrationFee}</td>
                <td>${product.dateCreated}</td>
                <td><a href="${PREFIX}/product?edit=true&id=${product.id}" class="sepV_a" title='Edit'><i class='icon-pencil'></i>
                                            Edit </a> 
                    <!-- <a href="#" title='Delete'><i class='icon-trash'></i></a></td> -->
            </tr>
        </c:forEach>
    </tbody>
</table>

我编辑了下面的块，但没有成功，因为表格没有显示从
var iListLength = 5; 到 var iListLength = 7;

    "fnUpdate": function ( oSettings, fnDraw ) {
        var iListLength = 5;
        var oPaging = oSettings.oInstance.fnPagingInfo();
        var an = oSettings.aanFeatures.p;
        var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

【问题讨论】：

您使用的是服务器端还是客户端数据源？您要添加的两列是数据源的一部分还是只是任意列？另外，您可以发布您的dataTable 配置部分吗？
嗨皮特，它的服务器端。我正在使用 jquery.datatables.bootstrap.min.js，我在 .jsp 文件中发布了上面的示例。
您是否已经为您的问题确定了一个可接受的解决方案？
嗨皮特，是的..已经发布了解决方案

标签： jquery jquery-ui jsp twitter-bootstrap datatables

【解决方案1】：

这不是 jquery-datatables 的问题，是的，html，因为它将产生的结果是您定义的表结构。

一列由

组成

th = 表格标题单元格

td = 细胞

和线

tr = 行

如果你的桌子看起来像

<table>
 <tr>
   <th>Field1</th>
   <th>Field2</th>
   <th>Field3</th>
   <th>Field4</th>
   <th>Field5</th>
 </tr>
 <tr>
   <td>value1</td>
   <td>value2</td>
   <td>value3</td>
   <td>value4</td>
   <td>value5</td>
 </tr>
[...]
<table>

您需要为列标题添加 2 个<th>，为字段添加 2 个<td>

<table>
 <tr>
   <th>Field1</th>
   <th>Field2</th>
   <th>Field3</th>
   <th>Field4</th>
   <th>Field5</th>
   <th>Field6</th>
   <th>Field7</th>
 </tr>
 <tr>
   <td>value1</td>
   <td>value2</td>
   <td>value3</td>
   <td>value4</td>
   <td>value5</td>
   <td>value6</td>
   <td>value7</td>
 </tr>
[...]
<table>

【讨论】：

嗨，G.Mendes，我已经完成了上述操作，但表格仍然没有显示。我在问题中添加了一个示例。谢谢
@pmaingi 我不认为问题出在fnUpdate 选项中，您可以发布其余的datatable 配置吗？另请注意，您评论了 td 关闭操作行上的每一行

【解决方案2】：

我在 datatable.js 中添加了以下内容，现在所有添加的列都可见。

谢谢

            oTable = $('#dt_e').dataTable( {
            "bProcessing": true,
            "bServerSide": true,
            "sPaginationType": "bootstrap",
            "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
            "sAjaxSource": "lib/datatables/server_side.php",
            "aoColumns": [
                { "sClass": "center", "bSortable": false },
                **{ "sClass": "center" },
                { "sClass": "center" },
                { "sWidth": "20%" },
                { "sWidth": "20%" },
                { "sClass": "center" },
                { "sClass": "center" },
                { "sClass": "center" }**

            ],
            "aaSorting": [[1, 'asc']]
        } );

【讨论】：