Incompatible with sScrollX/sScrollY

[spamguy]

Hi -- first off, great tool!

This ticket is more or less a clone of #13 with some expansion. To start from the beginning, YADCF renders oddly when DataTables' sScrollX/sScrollY is enabled. Modifying the included example.html triggers it right away:

$(document).ready(function(){
  $('#example').dataTable({sScrollX: '100%'}).yadcf([
        {column_number : 0},
        {column_number : 1,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
        {column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
        {column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
        {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});

Also give the div 'container' an arbitrary length -- say, 500px. In the result, note how the table renders strangely all around: the table's width isn't accurate (comment out the .yadcf() to compare), column headers display separate from the filter row, the sort arrows render twice, etc.

Everything above applies to sScrollY too.

The previous ticket #13 claimed to have a workaround, but I just got an alert() error from YADCF when I tried it.

[vedmack]

Hi and thanks,

In Issue #13 the user took the filter outside the table which ofcourse solved the problem because the filter wasn't inserted in the table header, I will take a look into yours scenario

[pcbulai]

@spamguy I solved this problem by modifying YADCF(unfortunately). I'll try and explain how and where(1). The solution from #13 is good as long as your table doesn't use ColVis(2) and the filters can be placed outside of the table(3).

1. Using YADCF with a scrollable table doesn't really work without filter_container_ID being set, and this one happens because datatables breaks every scrolling table in up to 3 different tables. If you have datatables 1.10, scroll to line 3451:

/*
         * The HTML structure that we want to generate in this function is:
         *  div - scroller
         *    div - scroll head
         *      div - scroll head inner
         *        table - scroll head table
         *          thead - thead
         *    div - scroll body
         *      table - table (master table)
         *        thead - thead clone for sizing
         *        tbody - tbody
         *    div - scroll foot
         *      div - scroll foot inner
         *        table - scroll foot table
         *          tfoot - tfoot
         */

Now, see that "master table" in the lines above? That table, which is the 2nd one, has the ID = your table ID before datatable init. The ID to whom you bind the .dataTable() object to. And this is important while using scrollable tables and YADCF because the latter one always uses that ID to know where to create the filters.

You can solve it doing something like this:

• define your table options as separate object
• define your table like so $(table).dataTable(optionsHere)
• query the DOM for the element .dataTables_wrapper.no-footer > tbody and add to it a new ID that contains the name of your initial table. For example, my table ID was #datagrid and I set the id for .dataTables_wrapper.no-footer > tbody equal to datagrid-header
• go to your YADCF.js plugin and edit the lines 1753 -> 1770 from

$.fn.yadcf = function (options_arg) {

        if ($(this.selector).length === 1) {
            setOptions(this.selector, options_arg);
            initAndBindTable(this, this.selector, 0);
        } else {
            var i = 0,
                selector;
            for (i; i < $(this.selector).length; i++) {
                $.fn.dataTableExt.iApiIndex = i;
                selector = this.selector + ":eq(" + i + ")";
                setOptions(this.selector, options_arg);
                initAndBindTable(this, selector, i);
            }
            $.fn.dataTableExt.iApiIndex = 0;
        }
        return this;
    };

to

$.fn.yadcf = function (options_arg) {

    if ($(this.selector + '-header').length === 1) {
      setOptions(this.selector + '-header', options_arg);
      initAndBindTable(this, this.selector + '-header', 0);
    } else {
      var i = 0,
        selector;
      for (i; i < $(this.selector + '-header').length; i++) {
        $.fn.dataTableExt.iApiIndex = i;
        selector = this.selector + '-header' + ":eq(" + i + ")";
        setOptions(this.selector + '-header', options_arg);
        initAndBindTable(this, selector, i);
      }
      $.fn.dataTableExt.iApiIndex = 0;
    }
    return this;
  };

• YADCF.js line 211 from

options[selector_arg] = tmpOptions;

to

var a = selector_arg.split('-')[0];
    options[a] = tmpOptions;

• YADCF line 1708 from

table_selector_tmp = table_selector;

to

table_selector_tmp = table_selector.split('-')[0];

2. Using filter_container_id on hidden columns always throws errors because by the moment you init YADCF, datatables already takes those column out of the DOM. If you don't specify an ID for the filter, toggling column visibility doesn't display the filters unless you do something like what I said here Add support for ColVis #56

3. If you need to place the filters inside the scrolling table, do step 1.

@vedmack the solution I proposed on the first point of this enormous comment can be implemented in YADCF as a custom option.

I hope I helped.

[vedmack]

Wow @sloby :) nice one! thanks for the solution, I hope that someday I'll get to add the support for the sScrollX/sScrollY ( so many things to do but no spare time :| )

[pcbulai]

@vedmack don't I know it...?! Stay tuned for my next challenge with YADCF where I have to implement Pickadate instead of jQuery UI Datepicker. Maybe I'll push some code here after all this hassle.

[vedmack]

Feel free to send pull requests :) but make sure that work on the latest yadcf version, I released 0.7.7.beta1 a hour ago with server side filtering support.

[pcbulai]

Oki. But first I gotta find that spare time too :)

[spamguy]

@sloby (and @vedmack): This is great! Thanks for the attention.

[vedmack]

Added ( at last :) ) support in 0.8.5.beta.4, see it in action http://yadcf-showcase.appspot.com/DOM_source.html and http://yadcf-showcase.appspot.com/ajax_mData_source.html grab from here https://github.com/vedmack/yadcf/blob/master/lab/jquery.dataTables.yadcf.js

[the86freak]

actually this doesn't seem to work in the latest version anymore in your example:
http://yadcf-showcase.appspot.com/ajax_mData_source.html

Yes, there's scroll-bar and you can also swipe it left/right for about a pixel.
But even though you can see, that the header is not scrolled.

What would you suggest to fix that? Do you see a workaround? I'm happy to help out there.

edit: it works with 0.8.6 and 0.8.7 but not with 0.8.8 any more.
see this fiddle with 0.8.7
http://jsfiddle.net/The86Freak/3h7k25fh/73/

[vedmack]

As to the scrollY , it works in the showcase, as to the scrollX, I havent used it in that page, and I don't really know why that horizontal scroll appears there, but it will appear even without using the yadcf (so its not related to yadcf), my fix was to place the filters in the right table headers, I don't really know that horizontal bar appears, but I guess you can get the answer on datatables forum , sorry.

Anyway, if you want to know if something happens because of yadcf or not , just comment out yadcf init code and see how datatables behaves.

[vedmack]

@the86freak it works just fine with the 0.8.8 / 0.8.9 and looks the same as your jsfiddle.

[the86freak]

@vedmack first: thanks for having a look into that.
you'r right, if you leave the css with v 0.8.8

if you also change that to 0.8.8 the header is not scrolling anymore.

Further investigation showed, that if I remove:

126 .dataTables_scrollHead {            
127         overflow: visible !important;           
128 }

from ../vedmack/yadcf/0.8.8/jquery.dataTables.yadcf.css
the header also scrolls again.
Is that a side-effect with another css or do you think you can remove that?

edit: update md

[vedmack]

@the86freak , will try to get back to you in a day or two

[vedmack]

@the86freak, Can you provide me an example of improper behaviour of yadcf css with a scrollX or scrollY ? because I can't understand your issue.

[the86freak]

@vedmack sure, no problem. I'll sum up:
The problem is, that when the table is bigger as the parent container (viewport), the overlapping part of the table (and its headers) are 'disapearing' - of course.
So when you define the width with scrollX, I excpect that I can scroll the table(content) horizontal and then also the header schould scroll according with the table-body.

This works with css-version 0.8.7: http://jsfiddle.net/The86Freak/q6bmyju9/

since css-version 0.8.8 it doesn't work anymore: http://jsfiddle.net/The86Freak/q6bmyju9/2/

[vedmack]

@the86freak ,'overflow: visible !important; ' will be removed in next beta, thanks for reporting