webERP Forum

Full Version: New Sales Order - Item List Does Not Sort - SOLVED
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Table Header sort click functionality does not work for Item data in list when creating a new Sales order. This can be addressed using methods discussed in this thread: http://www.weberp.org/forum/showthread.p...ht=sorting

I addressed the issue by inserting "echo '</table><table>';" at lines 1680 and 1773 but I think somebody should have a look at the code to be sure any fix adheres to webERP best practices.
Hi Paul, I did fix up this table sorting code a couple of years back, and set the code to Rafael. I don't think he ever had time to apply it though as it needed changes to all tables that require sorting. Basically all the header rows of a table that requires sorting need to be inside <thead></thead> tags, then the actual data that requires sorting (and nothing else) needs to be inside <tbody></tbody> tags and then any lines that appear at the bottom of the table and after the data need to be within <tfoot></tfoot> tags.

Then the SortSelect() function in javascripts/MiscFunctions.js needs to be replaced with the following:


function SortSelect() {
selElem = this;
var e = new Array;
th = localStorage.Theme;
columnText = selElem.innerHTML;
TableHeader = selElem.parentNode;
TableBodyElements = TableHeader.parentNode.parentNode.getElementsByTagName('tbody');
table = TableBodyElements[0];
i = TableHeader;
for (var t = 0, n; n = i.cells[t]; t++) {
if (i.cells[t].innerHTML == columnText) {
columnNumber = t;
s = getComputedStyle(i.cells[t], null);
if (s.cursor == "s-resize") {
i.cells[t].style.cursor = "n-resize";
i.cells[t].style.backgroundImage = "url('css/" + th + "/images/descending.png')";
i.cells[t].style.backgroundPosition = "right center";
i.cells[t].style.backgroundRepeat = "no-repeat";
i.cells[t].style.backgroundSize = "12px";
direction = "a"
} else {
i.cells[t].style.cursor = "s-resize";
i.cells[t].style.backgroundImage = "url('css/" + th + "/images/ascending.png')";
i.cells[t].style.backgroundPosition = "right center";
i.cells[t].style.backgroundRepeat = "no-repeat";
i.cells[t].style.backgroundSize = "12px";
direction = "d"
}
}
}
for (var r = 0, i; i = table.rows[r]; r++) {
var o = new Array;
for (var t = 0, n; n = i.cells[t]; t++) {
if (i.cells[t].tagName == "TD") {
o[t] = i.cells[t].innerHTML;
columnClass = i.cells[columnNumber].className
}
}
e[r] = o
}
e.sort(function (e, t) {
if (direction == "a") {
if (columnClass == "number") {
return parseFloat(e[columnNumber].replace(/[,.]/g, '')) - parseFloat(t[columnNumber].replace(/[,.]/g, ''))
} else if (columnClass == "date") {
if (e[columnNumber] !== undefined) {
da = new Date(convertDate(e[columnNumber], localStorage.DateFormat));
} else {
da = new Date(e[columnNumber]);
}
db = new Date(convertDate(t[columnNumber], localStorage.DateFormat));
return da > db
} else {
return e[columnNumber].localeCompare(t[columnNumber])
}
} else {
if (columnClass == "number") {
return parseFloat(t[columnNumber].replace(/[,.]/g, '')) - parseFloat(e[columnNumber].replace(/[,.]/g, ''))
} else if (columnClass == "date") {
if (e[columnNumber] !== undefined) {
da = new Date(convertDate(e[columnNumber], localStorage.DateFormat));
} else {
da = new Date(e[columnNumber]);
}
db = new Date(convertDate(t[columnNumber], localStorage.DateFormat));
return da <= db
} else {
return t[columnNumber].localeCompare(e[columnNumber])
}
}
});
for (var r = 0, i; i = table.rows[r]; r++) {
var o = new Array;
o = e[r];
for (var t = 0, n; n = i.cells[t]; t++) {
if (i.cells[t].tagName == "TD") {
i.cells[t].innerHTML = o[t]
}
}
}
return
}

This function now sorts dates correctly as well as alpha numeric. It only took me a couple of hours to get all the tables changed in my code, it just requires a developer to actually do it.

Thanks
Tim
Tim,

As usual thank you for your quick response and thorough explanation!

Paul
Thanks Paul.

I forgot to mention I also moved the default date format and the theme name to the browser local storage, so I needed to add the following code to includes/header.php (the SortSelect() function uses them):

echo '<script>
localStorage.setItem("DateFormat", "', $_SESSION['DefaultDateFormat'], '");
localStorage.setItem("Theme", "', $_SESSION['Theme'], '");
</script>';

Tim
UPDATE...

I simply added:

+ At line 1701: echo '<tbody>';
+ At line 1794: echo '</tbody>';

Now sorting works as expected and table layout looks fine.

Thank you again for your hep!
UPDATE...

I also added the following to PO_Items.php:

+ At line 1192: echo '<tbody>';
+ At line 1262: echo '</tbody>';

Now sorting works as expected and table layout looks fine.
Ok Tim,

If I have the full scope of the sorting needs, this appears to be the necessary changes:
  1. The localStorage portion (to the header)
  2. Replace the existing SortSelect with your SortSelect update
  3. Then for the sortable tables:
    • Add <thead> wrap around the <th> columns that have sorting
    • Add <tbody> tags for the sorted rows (after <thead>)
    • Add <tfoot> -- only appears necessary if a 'totals' row, or some other summary row(s) to avoid being sorted?

That will be my general plan at the moment, unless other aspects are missing.

Also, if the three "problem" SVN files need these changes, then changes to only those three files will be delayed, though I will apply the changes locally to have them ready to commit -- if we can ever get those corrected.
Since I sent Rafael the improved sorting function I have moved to using local storage for the default date format which gets rid of the old fudge of using:

alt="' . $_SESSION['DefaultDateFormat'] . '"

to get the date format into the javascript, and I would recommend you do the same as it is neater, clearer, and more 21st century Smile

But yes, that is basically it.
Yes, the calendar change from using the 'alt' attribute to the localStorage is very easy to apply to MiscFunctions.js. I've already tested use with a couple of date fields (removed the alt attributes as well, as extra verification) and it works just fine. Big Grin

That's like a done deal at this point. (except for eventual 'alt' attribute removals where no longer needed for the calendar handling)

Many (if not most) of the alt attributes (as shown in post #8) will be removed along with the sort handing changes (where occurrences exist in the same files), and then eliminate any lingering references afterwards.

Heck, I'll likely commit the minor calendar change with MiscFunctions.js either tonight or tomorrow! This way, at least the calendar can already be using the new localStorage DateFormat property with the next release. Smile
Reference URL's