Sorting Plug-ins not working
Sorting Plug-ins not working
LoveTheCoast
Posts: 3Questions: 0Answers: 0
I have beat my brain on why something so pathetically simple is not working. The link below gives a super-simple example of DataTables not working with a copy/paste of a plug-in found on this site (title-numeric).
http://beta.rspms.com/zDataTablesTest.htm
Clicking on the second column yields no sort whatsoever.
(I've also placed the code below in case you don't want to click a link.)
Can someone be so kind as to point out where I'm going wrong?
Thanks much!
[code]
Data Tables Test
<!-- link to jquery js -->
<!-- link to datatable js -->
Date
Day
Jan 1, 2012
Sun
Feb 1, 2012
Mon
jQuery.fn.dataTableExt.oSort['title-numeric-asc'] = function(a,b) {
var x = a.match(/title="*(-?[0-9\.]+)/)[1];
var y = b.match(/title="*(-?[0-9\.]+)/)[1];
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
var x = a.match(/title="*(-?[0-9\.]+)/)[1];
var y = b.match(/title="*(-?[0-9\.]+)/)[1];
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
$(document).ready(function() {
$("#otest").dataTable({
"aoColumns": [
null,
{ "sType": "title-numeric" }
]
})
});
[/code]
http://beta.rspms.com/zDataTablesTest.htm
Clicking on the second column yields no sort whatsoever.
(I've also placed the code below in case you don't want to click a link.)
Can someone be so kind as to point out where I'm going wrong?
Thanks much!
[code]
Data Tables Test
<!-- link to jquery js -->
<!-- link to datatable js -->
Date
Day
Jan 1, 2012
Sun
Feb 1, 2012
Mon
jQuery.fn.dataTableExt.oSort['title-numeric-asc'] = function(a,b) {
var x = a.match(/title="*(-?[0-9\.]+)/)[1];
var y = b.match(/title="*(-?[0-9\.]+)/)[1];
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
var x = a.match(/title="*(-?[0-9\.]+)/)[1];
var y = b.match(/title="*(-?[0-9\.]+)/)[1];
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
$(document).ready(function() {
$("#otest").dataTable({
"aoColumns": [
null,
{ "sType": "title-numeric" }
]
})
});
[/code]
This discussion has been closed.
Replies
http://live.datatables.net/alegav/edit#javascript,html,live
The above code exhibits the same issue I'm having within Chrome. The second column sorts, but the first one does not.
Also, the above link doesn't work at all inside of IE9. When I remove the osort methods it does (obviously without the sorting I need). Here's a link to that: http://live.datatables.net/icadow/edit#javascript,html,live
Thanks again
Thanks very much for taking up the DataTables support option! It really helps the project progress :-)
Thanks also for posting a link and such a clear description of the issue you face. Basically what is happening here is that the sorting functions in DataTables only have access to the contents of the TD element (i.e. not the TD element itself, nor any of its attributes!). As such, the sorting plug-in looks for an attribute on a tag that doesn't currently exist in the available string and throws and error.
So there are a number of ways to address this. The simplest is to simply wrap the data up in SPAN tags with the TITLE attribute on that tag instead. I've made that modification to your live demo here: http://live.datatables.net/alegav/2/edit .
If changing the HTML of the cell isn't an option in the creation of the table, what you can do is make use of fnRender: http://live.datatables.net/alegav/3/edit (the line to get the TD element there is a bit horrible.. DataTables 1.9 will include a new method called "fnCreatedCell" that will make this kind of thing a lot easier in future, but I'm assuming you will be using 1.8.2 at the moment).
The alternative (if you want one!) is to use custom sorting ( http://datatables.net/development/sorting#data_source ) to build an array to sort the data on as you wish - with this method you do have access to the DOM element, but is is a good bit slower and a bit more complicated to set up - useful for live data from the DOM though :-).
Regards,
Allan
Thank you for such a clear answer -- and the supporting examples!
And also a big thank you for creating (and supporting!) DataTables.
Neither my Show n entries is working. is they need any server side processing.
I am using it with portlets.
Here is my Jsp File:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="f" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 1 : 0)); };
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0)); };
$(document).ready(function()
{
$('#emp_table').dataTable(
{
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"iDisplayLength": 5,
"aLengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]],
"aaSorting": [[ 2, "desc" ]],
"aoColumns": [ null,
{ "sType": 'string-case' },
null,
null,
null ]
});
});
Employee Id
Employee Name
Age
Salary
Address
${emp.empId}
${emp.empName}
${emp.empAge}
${emp.salary}
${emp.address}
Employee Id
Name
Age
Salary
Address
Home