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

时间:2014-01-27 20:09:44

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

有谁知道如何在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);

2 个答案:

答案 0 :(得分:2)

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

列包含

th =表格标题单元格

td = cells

和行

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>

答案 1 :(得分: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']]
        } );