在使用twitter bootstrap选项卡时,我无法设置dataTables列宽

时间:2014-04-11 20:30:32

标签: jquery twitter-bootstrap jquery-datatables

我正在使用twitter bootstrap的标签导航,除此之外我还在使用jQuery dataTable。问题是我正在尝试扩大特定列,但无论我做什么,我都无法改变宽度。

我的表:

<table id="tbl_quantity" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
                                                    <!--thead section is required-->
                                                    <thead>
                                                        <tr>
                                                            <th data-class="expand" width="60">Quantity</th>
                                                            <th data-hide="phone,tablet">Type</th>
                                                            <th data-hide="phone,tablet">Price</th>
                                                            <th data-hide="phone,tablet">#/UM</th>
                                                            <th data-hide="phone,tablet">Text/Unit</th>
                                                            <th data-hide="phone,tablet">Text For Customer</th>
                                                            <th data-hide="phone,tablet">Weight(lb)</th>
                                                            <th data-hide="phone,tablet">Weight(kg)</th>
                                                            <th data-hide="phone,tablet">Sort Order</th>
                                                            <th data-hide="phone,tablet">Publish</th>
                                                            <th data-hide="phone,tablet">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <!--tbody section is required-->
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_ProdQty[]" class="txt_ProdQty form-control" placeholder="Ex: 10" required />
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_ProdQtyType[]" class="txt_ProdQtyType form-control" placeholder="Ex: stems" required/>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_QtyPrice[]" class="txt_QtyPrice form-control" placeholder="0.00" required/>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_itemsPerUnit[]" class="txt_itemsPerUnit form-control" placeholder="1" required/>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_textPerUnit[]" class="txt_textPerUnit form-control" placeholder="Ex: per stem" required/>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_TextForCustomer[]" class="txt_TextForCustomer form-control" placeholder="Ex: 10 stems" required/>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_QtyWt_lb[]" class="txt_QtyWt_lb form-control" placeholder="0" required/>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_QtyWt_kg[]" class="txt_QtyWt_kg form-control" placeholder="0" required/>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_sortOrder[]" class="txt_sortOrder form-control" placeholder="Ex: 1" required/>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <select name="sel_QtyPublish[]" class="sel_QtyPublish form-control selectpicker" required>
                                                                        <option value="1">Not Published</option>
                                                                        <option value="2">Published</option>
                                                                    </select>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <button class="btn btn-danger btn_qtyDelete">Delete</button>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                    <!--tfoot section is optional-->
                                                    <tfoot>
                                                        <tr>
                                                            <th>Quantity</th>
                                                            <th>Type</th>
                                                            <th>Price</th>
                                                            <th>#/UM</th>
                                                            <th>Text/Unit</th>
                                                            <th>Text For Customer</th>
                                                            <th>Weight(lb)</th>
                                                            <th>Weight(kg)</th>
                                                            <th>Sort Order</th>
                                                            <th>Publish</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </tfoot>
                                                </table>

我的JS:

var tableElementQty = $('#tbl_quantity');

                tableElementQty.dataTable({
                    sPaginationType: 'bootstrap',
                    oLanguage      : {
                        sLengthMenu: '_MENU_ records per page'
                    },
                    // disable sorting on the checkbox column
                    aoColumnDefs     : [],
                    aoColumns        : [
                        {"sWidth":"60px"},  //Quantity
                        {"sWidth":"60px"},  //Type
                        {"sWidth":"60px"},  //Price
                        {"sWidth":"60px"},  //#/UM
                        {"sWidth":"60px"},  //Text/Unit
                        {"sWidth":"60px"},  //Text For Customer
                        {"sWidth":"60px"},  //Weight(lb)
                        {"sWidth":"60px"},  //Weight(kg)
                        {"sWidth":"60px"},  //Sort Order
                        {"sWidth":"550px"},  //Publish
                        {"sWidth":"60px"}   //Action
                    ],
                    "bPaginate": false,
                    "bLengthChange": false,
                    "bFilter": true,
                    "bSort": false,
                    "bInfo": false,
                    "bAutoWidth"       : false,
                    sDom             : "t",
                    fnPreDrawCallback: function () {
                        // Initialize the responsive datatables helper once.
                        if (!responsiveHelperQty) {
                            responsiveHelperQty = new ResponsiveDatatablesHelper(tableElementQty, breakpointDefinition, {clickOn:'row'});
                        }
                    },
                    fnRowCallback  : function (nRow) {
                        responsiveHelperQty.createExpandIcon(nRow);
                    },
                    fnDrawCallback : function () {
                        // Respond to windows resize.
                        responsiveHelperQty.respond();
                    }
                });

我尝试用以下代码修改大小的代码:

var oTable = $('#tbl_quantity').dataTable();
oTable.fnAdjustColumnSizing();

我在桌子显示时也在firebug控制台中手动尝试了。但是这些专栏根本没有变化。我做错了什么?

1 个答案:

答案 0 :(得分:7)

如果要手动设置每列的宽度,必须将table-layout设置为fixed

#tbl_qunatity { table-layout: fixed; }