Not needing up and down image for sorting

amweiss

Does anybody know if it's possible to use DataTables and just have the user click on the column name to sort? Right now, I've loaded the up and down images on the server, but they are not showing anyway. But you can get it to sort by moving the mouse off the title. Here is an example:
http://www.insightla.org/audio/index3.asp
Anyway, it's confusing to the user at this point.

Any help you can provide would be much appreciated.
Thanks,
Allen

allan

I'm slightly confused myself :-). If I click the column name at the moment, it sorts as expected and the images are shown to indicate the sorting direction. Is that not what you want?

Allan

amweiss

Oh..I see, yes, Ok..it seems to be working now...guess I need to underline the titles so that people know you click there to change the sort order...thanks

amweiss

Hmm..I tried this on another page and it doesn't seem to be working....I stripped off everything except the important files, etc.

http://www.insightla.org/admin/test.asp

Is there something I'm missing?

Allen

cdaigle

Hi Allen,

I took a quick look at your page, and noticed that you are getting several javascript errors (jQuery not being defined).
Further investigation turns out that you are including jquery.dataTables.js before jquery.js. This is a problem because datatables is a plugin for jQuery, and as such needs jQuery to be included first.
Change this:
[code]


[/code]
to this:
[code]


[/code]
And hopefully this will fix the problems.

Cheers,
-Chris

amweiss

Thanks for looking into this..I just changed it as you suggested, but unfortunately it still isn't working. Any other possibilities?

cdaigle

I'm seeing the following errors in the console.

---
Unmatched encountered. Ignoring tag.
test.asp:196Unmatched encountered. Ignoring tag.
jquery.dataTables.js:5726DataTables warning (table id = 'table_arch'): Unexpected number of TD elements. Expected 76 and got 73. DataTables does not support rowspan / colspan in the table body, and there must be one cell for each row/column combination.
---

Every row needs a td tag for each column, and the first row only has one td tag. (But there are 4 columns)
Most likely missing a closing tag somewhere...

Hope this helps

amweiss

Thanks...that was it (got to get some new glasses for myself :)

amweiss

One other problem (I see others have this as well)..now, the sorting function doesn't work on the date (which is in mo/day/year). I read the posts where you talk about how to solve this, but I'm still unclear what code I'm supposed to use or where it should go. can you help?

cdaigle

I believe what you want is this plugin from the sorting section: Date (dd/mm/YY) on this page: http://datatables.net/plug-ins/sorting
I haven't done this before, but from what I understand, all you need to do is include the javascript provided on that page after you include jquery.dataTables.js, but before you initialize the dataTable ($().dataTable();).

When initializing the dataTable, you need to set the date column to use the sorting type you included - in this case, uk_date.

Just add the aoColumnsDef part from below, and (with the other javascript code above it), sorting should work.
[code]
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');

var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');

var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
$(document).ready(function() {
$('#table_audio').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"aoColumnDefs": [{"sType" : 'uk_date', "aTargets" : [1]}]
});
} );
[/code]

Hope this helps.