Explore our sites

Stack Exchange
tour help careers 2.0
Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

In my application I'm using jQuery DataTables 1.9.4 to display information dynamically to the user. Achieving this is fine and works great.

However in my application i have these tables within jQuery UI Tabs. At first, there was an error with dataTables not calculating the column widths correctly due to it not been visible on the screen (this was fixed by setting the '"bAutoWidth": false' property to false and calling oTable.fnAdjustColumnSizing(); which is binded to the tabs select/activate action).

The application now needs column filtering to enable data drill down which i have used jQuery DataTables Column Filter Plug-In for. For some reason the error has appeared again and I'm not sure how i can fix it (I'm assuming that the calculation for the footer column widths doesn't take place at the same time as the core table calculation).

Debug information of table: DataTable Debug (nothing looks out of the ordinary)

Any help would be great :)

DataTables Initialisation Code

        $('#tblQuotes').dataTable({
            "bJQueryUI": true,
            "aLengthMenu": [[10, 25, 50, 75, 100, 250, 500], [10, 25, 50, 75, 100, 250, 500]],
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '@Url.Content("~/Home/GetQuote")',
            "sPaginationType": "full_numbers",
            "sScrollY": 200,
            "sScrollX": "100%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true,
            "fnServerData": function Data(sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success":
                        function (msg) {
                            fnCallback(msg);
                        },
                    "failure":
                        function (errMsg) {
                            $('#errorMessage').text(errMsg);  //errorMessage with id of the div
                        }
                });
            },
            //"bLengthChange": true,
            "bSort": false,
            "bAutoWidth": true,
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                if (aData[4] == "Target") {
                    $(nRow).addClass("row_FollowUpNotComplete");
                }
            },
            "fnInitComplete": function () {
                this.fnAdjustColumnSizing(true);
            }
        }).columnFilter({
            "aoColumns": [
                            null, //Quote ID **Hidden**
                            { "type": "text", bRegex:true }, //Customer
                            { "type": "date-range" }, //Validity
                            { "type": "text", bRegex: true }, //Quoted By
                            { "type": "text", bRegex: true }, //TMF
                            { "type": "date-range" }, //Date of follow up
                            { "type": "date-range" }, //Log Date
                            { "type": "text", bRegex: true }, //Trade
            ]
        }).fnSetColumnVis(0, false);
        $('.dataTables_filter').css({ "display": "none" }); //Disable default search filter by css due to connection with column filters in the footer

Screenshot of Error DataTables Error

share|improve this question
 
make sure you are using related jqueryUI.min and jquery.min files in your project. –  AmirHossein Mehrvarzi Aug 21 at 14:49
 
Yeah I have them referenced as i use the various UI tools throughout the application e.g. datepicker, buttons etc. –  Tay Aug 21 at 15:12
 
Is it works properly and just viewed ugly, perhaps you have css conflict. –  AmirHossein Mehrvarzi Aug 21 at 16:14
 
Just looked and the CSS looks fine. It seems that the table defines individual element sizes depending on the overall size of the table which includes the header and footer widths. I think the plugin hides the original footer and injects the new one which may explain why its not taken into account at all. –  Tay Aug 22 at 9:33
 
Why you don't inspect it via browser. analyze css or scripts that force it to this shape. –  AmirHossein Mehrvarzi Aug 22 at 12:28
add comment

1 Answer

up vote 0 down vote accepted

This seems a bit embarrassing but after some trial and error i found that if you comment out/remove the "sScrollXInner" property it seems to resolve this issue. I'm not sure what other cases this will help with but i guess it seems to work well in conjunction with the following to help force column size re-adjustment:

    //DataTables property
    "fnInitComplete": function () {
        this.fnAdjustColumnSizing(true);
    }

And:

    //jQuery tab initialisation
    $("#tabs").tabs({
        "show": function (event, ui) {
            var table = $.fn.dataTable.fnTables(true);
            if (table.length > 0) {
                $(table).dataTable().fnAdjustColumnSizing();
            }
        }
    });
share|improve this answer
 
To add a side note to this, the 'true' parameter of the 'fnAdjustColumnSizing()' methods means all visible dataTable instances. –  Tay Sep 24 at 7:48
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.