Is there a way to shim the "dd
The organization I support dictates that all dates will be shown in dd-MON-yyyy format (10-SEP-2006, 08-MAY-2013). Please see http://jsfiddle.net/jhfrench/zpWWa/ for an example dataset.
When run on Chrome, dataTables correctly recognizes this pattern as a date.
When run on IE7, dataTables (or IE?) does not recognize this pattern as a date. Unfortunately, we have to support IE7. Is there a way to shim the "dd-MON-yyyy" format for IE, but not for Chrome or other browsers that natively support that format?
I am using IE conditions to specify the HTML tag, so I could key off of <HTML class="lt-ie9"> ; I'm also using Modernizr on this page (if there's a relevant test).
Rather than try to shim IE7, I think the simplest solution would be to write your own sort function and then call it for all the columns where the date format is used. This is pretty easy to do with DataTables, outlined here:
http://www.datatables.net/plug-ins/sorting
You can manually define the table to use the new sorting algorithm for your column, but that's a little clumsy, as you will need to do this wherever you use the format. Instead, you can autodetect, as outlined here:
http://www.datatables.net/plug-ins/type-detection
I created a fork of your fiddle with a quick solution here - I just converted the dates to a simple number - as long as you trust the data, this should be fine. Otherwise, you might want to convert to actual date objects, which is probably a more robust way to do it.
http://jsfiddle.net/pFdyK/
Code:
// Put these somewhere better than a global :)
var months = "JAN_FEB_MAR_APR_MAY_JUN_JUL_AUG_SEP_OCT_NOV_DEC".split("_");
function monthToOrd(month) {
return $.inArray(month, months);
}
function customDateToOrd(date) {
// Convert to a number YYYYMMDD which we can use to order
var dateParts = date.split(/-/);
var day = dateParts[0];
var month = monthToOrd(dateParts[1]);
var year = dateParts[2];
var numericDate = (year * 10000) + (month * 100) + day;
return numericDate;
}
// This will help DataTables magic detect your custom format
// Unshift so that it's the first data type (overridding in built ones)
jQuery.fn.dataTableExt.aTypes.unshift(
function ( sData )
{
// You might want to make this check a little tighter so you don't match
// invalid dates, but this should do for now
if (sData.match(/d{2}-[A-Za-z]{3}-d{4}/))
return 'custom-date';
else
return null;
}
);
// define the sorts
jQuery.fn.dataTableExt.oSort['custom-date-asc'] = function(a,b) {
var ordA = customDateToOrd(a);
var ordB = customDateToOrd(b);
return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
};
jQuery.fn.dataTableExt.oSort['custom-date-desc'] = function(a,b) {
var ordA = customDateToOrd(a);
var ordB = customDateToOrd(b);
return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
};
$(document).ready(function() {
$('html').addClass('lt-ie9');
$('table.datatable').dataTable();
} );
Expanding on Shaun's fine answer, there are at least two ways to go about testing the need to shim for dd-MMM-yyyy format. I've modified Shaun's code after intense consultation with JSLint (I swear it hates every line of ECMA I write).
Using IE conditionals
If you're already using IE conditionals ( <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> ), then you can just test for HTML.lt-ie9 and conditionally define the new sorting algorithm, then call dataTables:
//test for html.lt-ie9
if ($('html.lt-ie9').length) {
//create the new magic sorting
var customDateDDMMMYYYYToOrd = function (date) {
"use strict"; //let's avoid tom-foolery in this function
// Convert to a number YYYYMMDD which we can use to order
var dateParts = date.split(/-/);
return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + dateParts[0];
};
// This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift so that it's the first data type (so it takes priority over existing)
jQuery.fn.dataTableExt.aTypes.unshift(
function (sData) {
"use strict"; //let's avoid tom-foolery in this function
if (/^([0-2]?d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-d{4}/i.test(sData)) {
return 'custom-date-dd-mmm-yyyy';
}
return null;
}
);
// define the sorts
jQuery.fn.dataTableExt.oSort['custom-date-dd-mmm-yyyy-asc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
};
jQuery.fn.dataTableExt.oSort['custom-date-dd-mmm-yyyy-desc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
};
};
//now call the dataTable plugin against the target tables (in this case, any table with `class="dataTable"`)
$('table.datatable').dataTable();
See the IE conditionals example at http://jsfiddle.net/jhfrench/nEsCt/
Testing with Modernizr
On the other hand, if you're inclined to use Modernizr to test for the capability, we can define the Modernizr test, then use Modernizr to execute the test and conditionally load the shim magic (from a .js file), then call dataTables:
//define the Modernizr test
Modernizr.addTest('valid_date_dd_mmm_yyyy', function() {
return !isNaN(Date.parse("17-MAY-2013"));
});
//if Modernizr determines "dd-mmm-yyyy" dates are not supported, load the following JavaScript resources
Modernizr.load([
{
test: Modernizr.valid_date_dd_mmm_yyyy,
nope: 'http://appliedinter.net/Workstream/common_files/js/dataTable_shim_dd-MMM-yyyy.js',
complete: function () {
$(document).ready(function () {
//now call the dataTable plugin against the target tables (in this case, any table with `class="dataTable"`)
$('table.datatable').dataTable();
});
}
}
]);
See the Modernizr approach at http://jsfiddle.net/jhfrench/tNkGC/
链接地址: http://www.djcxy.com/p/71416.html下一篇: 有没有办法去填补“dd”