Yes I don't see the error in Firebug either - but then I've noticed a number of occasions where Firebug will swallow errors - there are a couple of bug reports in Firebug about that, although most now resolved. This might be one of those cases as well. Download a Webkit nightly and give it a bash.
I think there is a problem with the "bJQueryUI": true option.
I'm using the 1.0.1.dev version, it works fine but if you click on the sorting ui-icon witch is a SPAN, you'll get the error:
e is null
I have fixed the problem by replacing :
var nThTarget = e.target.nodeName == "TH" ? e.target : $(e.target).parent('TH')[0];
with
var nThTarget = e.target.nodeName == "TH" ? e.target : $(e.target).closest('TH')[0];
Hi Allan,
That's very useful and much required feature that you have intriduced for re-ordering.
Can you please suggest how to initialize it without using sDom option?
As mentioned above, can you please provide a sample code to initialize it using new ColReorder(...).
basically, I want to know how to pass the config param to this constructor.
However the column still reorders. But if I continue to reorder columns the error changes to:
Node was not found" code: "8
The state does not appear to be saving even with "bSaveState" set to true. If I disable ColVis, the state will start saving.
However, with ColVis enabled there is also another problem where the rows returned from server side are being put into the wrong columns.
I'm just curious if any of this is currently expected behavior. I'd love to have ColVis and ColReorder working with server side pipelining. I am also using jeditable but I doubt that matters.
HI, I have this working with ColVis, but in fnfilter it does not take into account eh reordering and as many have said it does not sync to the right filter column when it rebuilds. Any ideas? I am using mdataprops. I see this calls fnrebuild in ColVis, but does nothing to fnFilter when it reorders. Anyone anyone? bueller bueller?
Update... ok, I solved my issue, I will post a new thread about how to make it work.
Everything works for me except for one thing.
The colum moves correctly when I drag and drop it and everything is great.
The column is in the right place.
Filtering still works.
Sorting still works.
One problem.
I have individual filtering turned on.
And when I drag a column, the text of the column is not what is visually being dragged.
Its the whole thead tr with the with the tds that are being visually dragged.
It does not look right.
Yes it was the whole row. Sorry. hard to link to a test case. But I'll try to explain.
I've fixed it a little.
Now when I drag a column header text label, the individual filter input in the th above looks like it is being dragged instead of the text. Its just the visual drag that's off. Everything else looks good.
So I have a thead with 2 rows. One tr with the individual filter inputs. And the second tr with the column headers like this:
$("thead input").keyup(function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("thead input").index(this));
});
$("[colHeader]").addClass("colHeader");
// Hide Search All Filter
$(".dataTables_filter").css("display", "none");
});
I think I had (s) instead of (s) in one of the tr rows above and that's why it looked like the whole row of filter inputs was being dragged.
Now it only looks like one input field is being dragged which is better. But I sure would like the text to look like it is being dragged.
Hope this helps.
BTW, the individual filter fields example does not work because the filter row is on the bottom and the column text row is on top. In my code I fooled around and found that if you reverse it, putting the filter row on top and the column text row on the bottom everything works. Just this one little caveate I am trying to fix.
I just went into the coResizable.js and played with the _fnCreateDragNode function.
It wants to work with just the first row of s but since my individual filters take up the first row, I tweeked it to play with the second row:
/**
* Copy the TH element that is being drags so the user has the idea that they are actually
* moving it around the page.
* @method _fnCreateDragNode
* @returns void
* @private
*/
"_fnCreateDragNode": function () {
var that = this;
this.dom.drag = $(this.s.dt.nTHead.parentNode).clone(true)[0];
this.dom.drag.className += " DTCR_clonedTable";
while (this.dom.drag.getElementsByTagName('caption').length > 0) {
this.dom.drag.removeChild(this.dom.drag.getElementsByTagName('caption')[0]);
}
while (this.dom.drag.getElementsByTagName('tbody').length > 0) {
this.dom.drag.removeChild(this.dom.drag.getElementsByTagName('tbody')[0]);
}
while (this.dom.drag.getElementsByTagName('tfoot').length > 0) {
this.dom.drag.removeChild(this.dom.drag.getElementsByTagName('tfoot')[0]);
}
Replies
Allan
I think there is a problem with the "bJQueryUI": true option.
I'm using the 1.0.1.dev version, it works fine but if you click on the sorting ui-icon witch is a SPAN, you'll get the error:
e is null
I have fixed the problem by replacing :
var nThTarget = e.target.nodeName == "TH" ? e.target : $(e.target).parent('TH')[0];
with
var nThTarget = e.target.nodeName == "TH" ? e.target : $(e.target).closest('TH')[0];
Thanks for your great work,
Grotibo
Good catch, and thanks for the fix :-). I've used parents() rather than closest, but the principle is the same. It's now in the nightly.
Regards,
Allan
That's very useful and much required feature that you have intriduced for re-ordering.
Can you please suggest how to initialize it without using sDom option?
As mentioned above, can you please provide a sample code to initialize it using new ColReorder(...).
basically, I want to know how to pass the config param to this constructor.
Regards,
Sriram
I'm experiencing a couple problems... first, whenever I reorder a column firebug gives me an error:
uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.removeChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://dev.coldwatertackle.com/cwt-admin/view/javascript/jquery/dataTables/js/ColVis.min.js :: anonymous :: line 15" data: no]
However the column still reorders. But if I continue to reorder columns the error changes to:
Node was not found" code: "8
The state does not appear to be saving even with "bSaveState" set to true. If I disable ColVis, the state will start saving.
However, with ColVis enabled there is also another problem where the rows returned from server side are being put into the wrong columns.
I'm just curious if any of this is currently expected behavior. I'd love to have ColVis and ColReorder working with server side pipelining. I am also using jeditable but I doubt that matters.
Thanks,
Doug
Update... ok, I solved my issue, I will post a new thread about how to make it work.
The colum moves correctly when I drag and drop it and everything is great.
The column is in the right place.
Filtering still works.
Sorting still works.
One problem.
I have individual filtering turned on.
And when I drag a column, the text of the column is not what is visually being dragged.
Its the whole thead tr with the with the tds that are being visually dragged.
It does not look right.
Allan
I've fixed it a little.
Now when I drag a column header text label, the individual filter input in the th above looks like it is being dragged instead of the text. Its just the visual drag that's off. Everything else looks good.
So I have a thead with 2 rows. One tr with the individual filter inputs. And the second tr with the column headers like this:
Serial #
ID
EQUIP
TITLE
ARTCC
START
END
F/C
ACTIVITY
STATUS
jQuery hookup in document ready is like this:
$(function () {
var oTable = $("#tblResults").dataTable({
"sDom": 'Rlfrtip',
"bJQueryUI": true,
"bPaginate": false,
"bFilter": true,
"bInfo": false
});
$("thead input").keyup(function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("thead input").index(this));
});
$("[colHeader]").addClass("colHeader");
// Hide Search All Filter
$(".dataTables_filter").css("display", "none");
});
I think I had (s) instead of (s) in one of the tr rows above and that's why it looked like the whole row of filter inputs was being dragged.
Now it only looks like one input field is being dragged which is better. But I sure would like the text to look like it is being dragged.
Hope this helps.
BTW, the individual filter fields example does not work because the filter row is on the bottom and the column text row is on top. In my code I fooled around and found that if you reverse it, putting the filter row on top and the column text row on the bottom everything works. Just this one little caveate I am trying to fix.
It wants to work with just the first row of s but since my individual filters take up the first row, I tweeked it to play with the second row:
/**
* Copy the TH element that is being drags so the user has the idea that they are actually
* moving it around the page.
* @method _fnCreateDragNode
* @returns void
* @private
*/
"_fnCreateDragNode": function () {
var that = this;
this.dom.drag = $(this.s.dt.nTHead.parentNode).clone(true)[0];
this.dom.drag.className += " DTCR_clonedTable";
while (this.dom.drag.getElementsByTagName('caption').length > 0) {
this.dom.drag.removeChild(this.dom.drag.getElementsByTagName('caption')[0]);
}
while (this.dom.drag.getElementsByTagName('tbody').length > 0) {
this.dom.drag.removeChild(this.dom.drag.getElementsByTagName('tbody')[0]);
}
while (this.dom.drag.getElementsByTagName('tfoot').length > 0) {
this.dom.drag.removeChild(this.dom.drag.getElementsByTagName('tfoot')[0]);
}
$('thead tr:eq(1)', this.dom.drag).each(function () {
$('th:not(:eq(' + that.s.mouse.targetIndex + '))', this).remove();
});
$('tr', this.dom.drag).height($('tr:eq(1)', that.s.dt.nTHead).height());
$('thead tr:lt(1)', this.dom.drag).remove();
$('thead th:eq(1)', this.dom.drag).each(function (i) {
this.style.width = $('th:eq(' + that.s.mouse.targetIndex + ')', that.s.dt.nTHead).width() + "px";
});
this.dom.drag.style.position = "absolute";
this.dom.drag.style.top = "0px";
this.dom.drag.style.left = "0px";
this.dom.drag.style.width = $('th:eq(' + that.s.mouse.targetIndex + ')', that.s.dt.nTHead).outerWidth() + "px";
this.dom.pointer = document.createElement('div');
this.dom.pointer.className = "DTCR_pointer";
this.dom.pointer.style.position = "absolute";
if (this.s.dt.oScroll.sX === "" && this.s.dt.oScroll.sY === "") {
this.dom.pointer.style.top = $(this.s.dt.nTable).offset().top + "px";
this.dom.pointer.style.height = $(this.s.dt.nTable).height() + "px";
}
else {
this.dom.pointer.style.top = $('div.dataTables_scroll', this.s.dt.nTableWrapper).offset().top + "px";
this.dom.pointer.style.height = $('div.dataTables_scroll', this.s.dt.nTableWrapper).height() + "px";
}
document.body.appendChild(this.dom.pointer);
document.body.appendChild(this.dom.drag);
}
This line gets rid of the filter inputs looking like they are being dragged:
$('thead tr:lt(1)', this.dom.drag).remove();