Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82012

Clarification on sWidth

$
0
0
Hi Allan

Please can you clarify something for me; I'm setting sWidth for each column but it seems those widths are not being honoured. The example you can look at is the events columns (row 2 of aoColumnDefs). I would expect the header for this column to be 150px but it is actually 221px.

Config:

   var oTable = $('#programtable').dataTable( {
        "bProcessing": true,
        "bServerSide": false,
        "bDeferRender": false,
        "sAjaxSource": '/affiliates/529/program/index/downloadprogramsjoined?format=json',
        "aoColumnDefs": [
{"mData":"name","sTitle":"Program","sClass":"name","sWidth":"","aTargets":[0],"bVisible":true,"mRender":function (data, type, row) {return renderNames(data, type, row);}},
{"mData":"events","sTitle":"Commissions","sClass":"events","sWidth":"150px","aTargets":[1],"bVisible":true,"mRender":function (data, type, row) {return renderEvents(data, type, row);}} .......... TRUNCATED
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "bAutoWidth": true,
        "sScrollY": "600px",
        "sScrollX": "600px",
        "bStateSave": false,
        "fnInitComplete": function (){
           // makeFooter();
           $('#programtable_filter').append('<input type="button" class="ui-corner-all" value="Choose Columns" id="columnChooserButton">');
               $('#columnChooserButton').click(function(){
                    $('#columnChooser').dialog({
                        show: "blind",
                        hide: "explode",
                        width: 620,
                        title: 'Choose columns',
                        modal: false,
                    });
                })
           $('#programtable_filter input[type=text]').focus();
        }
    } );


This is what is rendered in the column header

<thead><tr role="row"><th class="name sorting_asc" tabindex="0" rowspan="1" colspan="1" style="width: 125px; " aria-sort="ascending" aria-label="Program: activate to sort column descending">Program</th><th class="events sorting" tabindex="0" rowspan="1" colspan="1" style="width: 221px; " aria-label="Commissions: activate to sort column ascending">Commissions</th><th class="affiliateApproval sorting" tabindex="0" rowspan="1" colspan="1" style="width: 50px; " aria-label="Affiliate approval: activate to sort column ascending">Affiliate approval</th><th class="categories sorting" tabindex="0" rowspan="1" colspan="1" style="width: 66px; " aria-label="Categories: activate to sort column ascending">Categories</th><th class="numProducts sorting" tabindex="0" rowspan="1" colspan="1" style="width: 50px; " aria-label="# products: activate to sort column ascending"># products</th><th class="averageNetworkCommission sorting" tabindex="0" rowspan="1" colspan="1" style="width: 47px; " aria-label="Av Comm.1: activate to sort column ascending">Av Comm.<sup>1</sup></th><th class="averageClickSaleTime sorting" tabindex="0" rowspan="1" colspan="1" style="width: 49px; " aria-label="Av clk2sale time1: activate to sort column ascending">Av clk2sale time<sup>1</sup></th><th class="cookieLength sorting" tabindex="0" rowspan="1" colspan="1" style="width: 38px; " aria-label="Cookie: activate to sort column ascending">Cookie</th><th class="ephc sorting" tabindex="0" rowspan="1" colspan="1" style="width: 37px; " aria-label="EPHC1: activate to sort column ascending">EPHC<sup>1</sup></th><th class="ctr sorting" tabindex="0" rowspan="1" colspan="1" style="width: 29px; " aria-label="CTR1: activate to sort column ascending">CTR<sup>1</sup></th><th class="conversion sorting" tabindex="0" rowspan="1" colspan="1" style="width: 35px; " aria-label="Conv1: activate to sort column ascending">Conv<sup>1</sup></th></tr></thead>


Viewing all articles
Browse latest Browse all 82012

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>