Move scroll bar on tab of footer filters

bbeuerlein

Hello,

I have been looking around for this question everywhere, but it does not seem to be a common topic (or I need to relearn how to use Google). I have a scenario where I have created a table with about 10 fields. Because of the size of the table and the size of the potential data, I have implemented horizontal scrolling with column filters for the footer of the table. The problem I am having is that when tabbing to an input in that footer that is not currently visible, the scroll bar does not move with the cursor. You can still type and have the column filtered, but you cannot see what you are typing.

Is there a way to either initialize the table, or bind to the table a function that moves the scroll bar automatically if you tab to a field that cannot be seen because of the horizontal scroll?

Here is my table initializer:

   var oTable = $('#historyResultsTable').dataTable({
        "sScrollY": "300px",
        "sScrollX": "100%",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": $('#HistorySearchURL').val(),
        "aaSorting": [[0, 'desc']],
        "bDestroy": true,
        "asStripeClasses": ["odd nutzer_tr", "even nutzer_tr"],
        "oLanguage": {
            "sSearch": "Search all columns:",
            "sLengthMenu": "_MENU_ records per page"
        },
        "fnServerData": function (sSource, aoData, fnCallback) {
            $.ajax({
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        },
        "iDeferLoading": 0
    });

   $("#HistoryResultsTable_footer input").keyup(function () {
        /* Filter on the column (the index) of this element */
        oTable.fnFilter(this.value, $("#HistoryResultsTable_footer input").index(this));
    });

    $("#HistoryResultsTable_footer input").each(function (i) {
        asInitVals[i] = this.value;
    });

   $("#HistoryResultsTable_footer input").blur(function (i) {
        if (this.value == "") {
            //                        this.className = "search_init";
            this.value = asInitVals[$("#HistoryResultsTable_footer input").index(this)];
        }
    });

    $("#historyResultsTable").delegate(".nutzer_tr", "click", function () {
        //var oTable = $('#historyResultsTable').dataTable();

        var aPos = oTable.fnGetPosition(this);
        var aData = oTable.fnGetData(aPos);
        gIDNumber = aData[5];

        someFunction(gIDNumber);

    });