有没有办法去填补“dd”
我支持的组织规定所有日期将以dd-MON-yyyy格式显示(10-SEP-2006,2013年5月8日)。 有关示例数据集,请参阅http://jsfiddle.net/jhfrench/zpWWa/。
在Chrome上运行时,dataTables将此模式正确识别为日期。
在IE7上运行时,dataTables(或IE?)不会将此模式识别为日期。 不幸的是,我们必须支持IE7。 有没有办法为IE浏览器提供“dd-MON-yyyy”格式,但不支持Chrome或其他原生支持该格式的浏览器?
我使用IE条件来指定HTML标签,所以我可以键入<HTML class="lt-ie9">
; 我也在这个页面上使用Modernizr(如果有相关的测试)。
我认为最简单的解决方案是编写自己的排序函数,然后在所有使用日期格式的列中调用它,而不是尝试填充IE7。 这对DataTables来说很简单,这里概述:
http://www.datatables.net/plug-ins/sorting
您可以手动定义表格,以便为列使用新的排序算法,但这有点笨拙,因为无论使用何种格式,都需要执行此操作。 相反,您可以自动检测,如下所示:
http://www.datatables.net/plug-ins/type-detection
我在这里创建了一个快速解决方案的叉子 - 我只是将日期转换为一个简单的数字 - 只要您信任数据,这应该没问题。 否则,你可能想要转换为实际的日期对象,这可能是一个更强大的方法来做到这一点。
http://jsfiddle.net/pFdyK/
码:
// 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();
} );
扩展Shaun的正确答案,至少有两种方法可以测试dd-MMM-yyyy格式的需求。 我经过与JSLint的紧密磋商后修改了Shaun的代码(我发誓它讨厌我编写的ECMA的每一行)。
使用IE条件
如果您已经使用IE条件( <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
),那么你可以测试HTML.lt-ie9
并有条件地定义新的排序算法,然后调用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();
请参阅http://jsfiddle.net/jhfrench/nEsCt/上的IE条件示例
用Modernizr测试
另一方面,如果您倾向于使用Modernizr来测试功能,我们可以定义Modernizr测试,然后使用Modernizr执行测试并有条件地加载shim magic(从.js文件),然后调用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();
});
}
}
]);
请参阅http://jsfiddle.net/jhfrench/tNkGC/上的Modernizr方法
链接地址: http://www.djcxy.com/p/71415.html