Column widthth issues, possible solutions

[GoogleCodeExporter]

What steps will reproduce the problem?
http://live.datatables.net/esabiy/9/edit
I have noticed two issues with the final width assigned for each datatable 
column.
1. First issue: Bad header alignment which doesnt fit with the body rows. The 
th columns in the thead tag have a diferent width than the td in the body tag.

2. Second issue: If we set ColumnFilter with head:after (or before), when the 
input search boxes are added into the datatable header ths, each th is expanded 
with a lot more width than it should have.

What is the expected output? What do you see instead?
1. First issue possible solution: 
Add the following code after setting the datatable:
exdatatable.fnAdjustColumnSizing(); //**fix for columns width

2. Second issue possible solution:
We set the input search box width to the first render column width. Change the 
code inside function fnCreateInput(..) with:
  //th.css and outerWidth() may not work in IE.
  ssize = th.width() + parseInt(th.css("padding-left")) + parseInt(th.css("padding-right")); //outerWidth
  if ((ssize == null) || (ssize == 0) || (ssize == "")) {
    ssize = "20"; //set minimum default size
  }
  ssize = ssize + 4; //for security we add a bit more
  ssize = ' style="width: ' + ssize + 'px;" ';  
  var input = $('<input type="text" class="' + search_init + sCSSClass + '" value="' + inputvalue + '"' + ssize + ' />');

*(attached full jquery.dataTables.columnFilter.js file).

What version of the product are you using? On what operating system?
Datatables 1.9.4.
ColumnFilter 1.5.1 with head:after.
Firefox, IE, Chrome.

Please provide any additional information below.
http://live.datatables.net/esabiy/9/edit

Original issue reported on code.google.com by blacksha...@gmail.com on 21 May 2013 at 2:57

Attachments:

• jquery.dataTables.columnFilter.js

[GoogleCodeExporter]

Improved the way to automatically handle and set the width of the input 
filtering boxes. Just put the following code under your datatables, after the 
try and catch(), and the input boxes will have their width adjusted to the 
width of its tr th. 
This code has many advantages. The function is global, and will render the 
columns width again after the Datatables has been loaded. It will allow to work 
under deep divs and iframes where its hard to detect and get the right column 
width for each column and prevent a bad alignement of header and body column 
width.

//oTable is the datatables object: oTable = $('#example').dataTable( 
        $(function()
        {
            $(window).bind('load', function()
            {
                if (typeof oTable != 'undefined')
                {
                    if ((oTable != null) && (oTable != ""))
                    {
                        oTable.fnAdjustColumnSizing();
                    }

                    var oTabletrth = $('#example_wrapper.dataTables_wrapper div.dataTables_scroll div.dataTables_scrollHead div.dataTables_scrollHeadInner table.display thead tr th');
                    if ( (typeof(oTabletrth) != 'undefined') && (oTabletrth != null) )
                    {
                        oTabletrth.each(function(){
                            var otrth = $(this);
                            var oInput = $(this).find("input");
                            if ( (typeof(oInput) != 'undefined') && (oInput != null) )
                            {
                                var swidth = otrth.attr('width');
                                if ((swidth == null) || (swidth == 0) || (swidth == ""))
                                {
                                    swidth = otrth.width();
                                }
                                var sinputwidth = swidth - 20;
                                sinputwidth = sinputwidth + 'px';
                                oInput.css({'width':sinputwidth});
                            }
                        });
                    }
                }
            });
        });

Original comment by blacksha...@gmail.com on 19 Jul 2013 at 8:29

[GoogleCodeExporter]

In order for this to work for me, I had to make a few changes.  First, putting 
the code into the fnInitComplete attribute of the dataTable call, so that the 
widths would take into account the loaded data (versus the column titles).  I 
also added a check to see if the column filter type was a date range - I want 
those to stay small (I've got the .date_range_filter class set with a 3em width 
in css)

        "fnInitComplete": function(oSettings, json) {
            var oTabletrth = $('#mytablename_wrapper.dataTables_wrapper div.dataTables_scroll div.dataTables_scrollHead div.dataTables_scrollHeadInner table.display thead tr th');
            if ( (typeof(oTabletrth) != 'undefined') && (oTabletrth != null) )
            {
                oTabletrth.each(function(){
                    var otrth = $(this);
                    var oInput = $(this).find("input");
                    if ( (typeof(oInput) != 'undefined') && (oInput != null) )
                    {
                        if (oInput.attr('className') == 'date_range_filter hasDatepicker') {
                            console.log("has date - not setting width");
                        } else {
                            var swidth = otrth.attr('width');
etc etc

Original comment by t...@gmara.org on 30 Apr 2014 at 7:05