如何将列宽设置为jQuery datatable？ [英] How to set column widths to a jQuery datatable?

问题描述

我有一个jQuery datatable（以红色概括），但是发生什么事情是表跳出了我为div设置的宽度（这是650像素）。

这是屏幕截图：

这是我的代码：

 < script type =text / javascript> 
 
 var rateandcharges1; 
 
 $（document）.ready（function（）{
 
 / *初始化表* / 
 $（＃ratesandcharges1）dataTable（{
bRetrieve：false，
bFilter：false，
bSortClasses：false，
bLengthChange：false，
bPaginate：false，
bInfo：false，
bJQueryUI：true，
bAutoWidth：false，
aaSorting：[[2，desc]]，
aoColumns：[
 {sWidth：'9％'}，
 {sWidth：'9％'}，
 {sWidth：'9％'}，
 { sWidth：'9％'}，
 {sWidth：'9％'}，
 {sWidth：'9％'}，
 {sWidth：'9％'}，
 {sWidth：'9％'}，
 {sWidth：'9％'}，
 {sWidth：'9％'}，
 {sWidth：'10％'}] 
}）; 
 
 ratesandcharges1.fnDraw（）; 
 
}）; 
< / script> 
< div id =ratesandcharges1Divstyle =width：650px;> 
 
 
< table id =ratesandcharges1class =grid> 
< thead> 
<！ - 标题行 - > 
< tr> 
< th>费用代码< / th> 
< th>费率< / th> 
< th>数量< / th> 
<总费用< / th> 
< th> VAT％< / th> 
< th> Calc。键入< / th> 
< th>由< / th> 
< th> From< / th> 
< th>到< / th> 
< th> VAT< / th> 
> MVGB< / th> 
< / tr> 
< / thead> 
<！ - 数据行 - > 
< tbody> 
< tr> 
< td> Day / Tag< / td> 
< td> 55.00< / td> 
< td> 3.00< / td> 
< td> 165.00< / td> 
< td> 20.00< / td> 
< td>租用时间< / td> 
< td>帐单/代理< / td> 
< td> 5/11/2010< / td> 
< td> 08/11/2010< / td> 
< td> 33.00< / td> 
< td> 1.98< / td> 
< / tr> 
< tr> 
< td> PAI< / td> 
< td> 7.50< / td> 
< td> 3.00< / td> 
< td> 22.50< / td> 
< td> 20.00< / td> 
< td>租用时间< / td> 
< td>驱动程序/ Cust。< / td> 
< td> 5/11/2010< / td> 
< td> 08/11/2010< / td> 
< td> 4.50< / td> 
< td> 0.00< / td> 
< / tr> 
< tr> 
< td> BCDW< / td> 
< td> 15.00< / td> 
< td> 3.00< / td> 
< td> 45.00< / td> 
< td> 20.00< / td> 
< td>租用时间< / td> 
< td>驱动程序/ Cust。< / td> 
< td> 5/11/2010< / td> 
< td> 08/11/2010< / td> 
< td> 9.00< / td> 
< td> 0.54< / td> 
< / tr> 
< tr> 
< td> BTP< / td> 
< td> 7.15< / td> 
< td> 3.00< / td> 
< td> 21.45< / td> 
< td> 20.00< / td> 
< td>租用时间< / td> 
< td>驱动程序/ Cust。< / td> 
< td> 5/11/2010< / td> 
< td> 08/11/2010< / td> 
< td> 4.29< / td> 
< td> 0.26< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
  

任何想法？

谢谢

解决方案

尝试设置表格上的宽度：

 < table id =ratesandcharges1class =gridstyle =width：650px;> 
  

您将不得不将650调整为几何像素，以计算任何填充，边距和

你可能还会有一些问题。对于所有这些列，我看不到足够的水平空间，而不会影响标题，减少字体大小或其他一些难看的东西。

I have a jQuery datatable(outlined in red), but what happens is that the table jumps out of the width I have set for the div(which is 650 px).

Here is the screen shot:

Here is my code:

<script type="text/javascript">

    var ratesandcharges1;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges1").dataTable({
            "bRetrieve": false,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": false,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '10%' } ]
        });

        ratesandcharges1.fnDraw();

    });
</script>
<div id="ratesandcharges1Div" style="width: 650px;"> 


<table id="ratesandcharges1" class="grid" >
    <thead>
        <!--Header row-->
        <tr>
            <th>Charge Code</th>
            <th>Rates</th>
            <th>Quantity</th>
            <th>Total Charge</th>
            <th>VAT %</th>
            <th>Calc. Type</th>
            <th>Paid By</th>
            <th>From</th>
            <th>To</th>
            <th>VAT</th>
            <th>MVGB</th>
         </tr>
    </thead>
    <!--Data row-->
    <tbody>
        <tr>
            <td>Day/Tag</td>
            <td>55.00</td>
            <td>3.00</td>
            <td>165.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Bill-to/Agent</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>33.00</td>
            <td>1.98</td>
        </tr>
        <tr>
            <td>PAI</td>
            <td>7.50</td>
            <td>3.00</td>
            <td>22.50</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.50</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>BCDW</td>
            <td>15.00</td>
            <td>3.00</td>
            <td>45.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>9.00</td>
            <td>0.54</td>
        </tr>
        <tr>
            <td>BTP</td>
            <td>7.15</td>
            <td>3.00</td>
            <td>21.45</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.29</td>
            <td>0.26</td>
        </tr>
    </tbody>
</table>
</div>    

Any ideas ?

Thanks

解决方案

Try setting the width on the table itself:

<table id="ratesandcharges1" class="grid" style="width: 650px;">

You'll have to adjust the 650 by a couple pixels to account for whatever padding, margins, and borders you have.

You'll probably still have some issues though. I don't see enough horizontal space for all those columns without mangling the headers, reducing the font sizes, or some other bit of ugliness.

这篇关于如何将列宽设置为jQuery datatable？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！