我有一个日期列在这个2级的浏览器排序问题,在镀铬的正常工作。
我想不出可以在看什么,希望有人能帮助我。
我使用的格式为(月名年)2013例>十月
的代码:(包含日期列是数字2)
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#resultados').dataTable( {
"sPaginationType": "full_numbers",
aaSorting: [] ,
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1,4 ] },
],
"aLengthMenu": [[25, 50, 75, 100], [25, 50, 75, 100]],
"iDisplayLength": 100
} );
} );
</script>
提前致谢。
不知道FF,但老IE可能无法在冗余的情况下,
因此,尝试下面的代码:
$(document).ready(function () {
$('#resultados').dataTable({
"sPaginationType": "full_numbers",
aaSorting: [],
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1, 4 ] }
],
"aLengthMenu": [[25, 50, 75, 100], [25, 50, 75, 100]],
"iDisplayLength": 100
});
});
没JSLint的给它的冗余去除,
(后[ 1,4 ] }
原来, Date.parse()
在IE和FF实现不正确地解释这些字符串,而Chrome呢!
我创建了一个插件来得到这个工作(note--我已经把拉请求在GitHub上得到它为未来的主要回购):
/**
* This sorting plug-in will sort, in calendar order, data which
* is in the format "MMMM yyyy". Inspired by forum discussion:
* http://datatables.net/forums/discussion/1242/sorting-dates-with-only-month-and-year
*
* @name Date (MMMM yyyy)
* @anchor Sort dates in the format `MMMM yyyy`
* @author Phil Hurwitz
*
* @example
* $('#example').dataTable( {
* columnDefs: [
* { type: 'stringMonthYear', targets: 0 }
* ]
* } );
*/
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"stringMonthYear-pre": function (s) {
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dateComponents = s.split(" ");
dateComponents[0] = dateComponents[0].replace(",", "");
dateComponents[1] = jQuery.trim(dateComponents[1]);
var year = dateComponents[1];
var month = 0;
for (var i = 0; i < months.length; i++) {
if (months[i].toLowerCase() == dateComponents[0].toLowerCase()) {
month = i;
break;
}
}
return new Date(year, month, 1);
},
"stringMonthYear-asc": function (a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"stringMonthYear-desc": function (a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
Data table support by default "YYYY-MM-DD" so to support date format "dd-MMM-yyyy" and "MMM-yyyy" we need to include a plugin code below:-
(function () {
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]*1);
};
// 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 'date-dd-mmm-yyyy';
}
return null;
}
);
// define the sorts
jQuery.fn.dataTableExt.oSort['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['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);
};
})();
and we have to specify the new introduced type to column of date as below:-
var costRevenueGraph = $('#costRevenueGraphTbl').dataTable({
"sPaginationType": "full_numbers",
"paging": true,
"bSort": true,
"ordering": false,
"info": false,
"iDisplayLength": 10,
"aaData": costRevenueGraphData,
"sImgDirPath": "http://assets.cms.gov/resources/libs/datatables/1.9.1/images/",
"aoColumns": [
{ "mDataProp": "day","sType":'date-dd-mmm-yyyy' },
{ "mDataProp": 'cost',"sType":'formatted-num' },
{ "mDataProp": 'costOFInternalFailure',"sType":'formatted-num' },
{ "mDataProp": 'costOFExternalFailure',"sType":'formatted-num' },
{ "mDataProp": 'costOFPreventiveInvestment',"sType":'formatted-num' },
{ "mDataProp": 'costOFAssessmentInvestment',"sType":'formatted-num' },
{ "mDataProp": 'costOfRedHerringInvestment',"sType":'formatted-num' },
{ "mDataProp": 'revenue',"sType":'formatted-num' }
],
"aoColumnDefs": [{
"aTargets": [0],
"fnRender": function(data, type, row) {
return $filter('date')(data.aData[data.mDataProp], 'dd-MMM-yyyy');
}
},{
"aTargets": [1,2,3,4,5,6,7],
"aType":'formatted-num',
"fnRender": function(data, type, row) {
return $filter('currency')(data.aData[data.mDataProp], '$');
}
}]
});
As same above if we want to support format "MMM-yyyy" we need to do a little hack
(function () {
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
date= "01-"+date
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]*1);
};
// 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) {
sData= "01-"+date
"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 'date-dd-mmm-yyyy';
}
return null;
}
);
// define the sorts
jQuery.fn.dataTableExt.oSort['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['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);
};
})();
and how to implement here is a demo
var costRevenueGraph = $('#fcSimulationGraphTbl').dataTable({
"sPaginationType": "full_numbers",
"paging": true,
"bSort": true,
"ordering": false,
"info": false,
"iDisplayLength": 10,
"aaData": forecastingGraphObjTblData,
"sImgDirPath": "http://assets.cms.gov/resources/libs/datatables/1.9.1/images/",
"aoColumns": [
{ "mDataProp": "day","sType":'date-dd-mmm-yyyy' },
{ "mDataProp": 'forecastDemand',"sType":'formatted-num' },
{ "mDataProp": 'actualDemand',"sType":'formatted-num' },
{ "mDataProp": 'actualAbsolutePercentageError',"sType":'percent' },
{ "mDataProp": 'trackingSignal',"sType":'percent' }
],
"aoColumnDefs": [{
"aTargets": [0],
"fnRender": function(data, type, row) {
return $filter('date')(data.aData[data.mDataProp], 'MMM-yyyy');
}
},{
"aTargets": [1,2],
"aType":'formatted-num',
"fnRender": function(data, type, row) {
return $filter('number')(data.aData[data.mDataProp]);
}
},{
"aTargets": [3,4],
"aType":'percent',
"fnRender": function(data, type, row) {
return data.aData[data.mDataProp]+'%';
}
}]
});
我也面临着同样的问题,我已经通过使用下面的技巧解决它:
<span style="display: none;">{{ date('Y-m-d', strtotime($date_varilable)) }}</span>
我已经把相同span
这是隐藏的,但将日期标签'Ym-d'
的格式,而此格式正确解析由Chrome
和Firefox
和其工作的罚款。
说明:这招是用于在其中有一个复选框列提供的排序,它的检查或未经检查是基于一些价值。 在这种情况下,跨度值,用于通过数据表库排序的目的。