-
Notifications
You must be signed in to change notification settings - Fork 284
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Incompatible with sScrollX/sScrollY #43
Comments
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 |
@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).
/*
* 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:
$.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;
};
options[selector_arg] = tmpOptions; to var a = selector_arg.split('-')[0];
options[a] = tmpOptions;
table_selector_tmp = table_selector; to table_selector_tmp = table_selector.split('-')[0];
@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. |
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 :| ) |
@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. |
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. |
Oki. But first I gotta find that spare time too :) |
* New Feature, added support for sScrollX / sScrollY #43
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 |
actually this doesn't seem to work in the latest version anymore in your example: Yes, there's scroll-bar and you can also swipe it left/right for about a pixel. 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. |
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. |
@the86freak it works just fine with the 0.8.8 / 0.8.9 and looks the same as your jsfiddle. |
@vedmack first: thanks for having a look into that. 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 edit: update md |
@the86freak , will try to get back to you in a day or two |
@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. |
@vedmack sure, no problem. I'll sum up: 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/ |
@the86freak ,'overflow: visible !important; ' will be removed in next beta, thanks for reporting |
p.s chosen wont play well in scrolX/Y mode (select2 will fit perfectly)
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:
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.
The text was updated successfully, but these errors were encountered: