Ich versuche, eine Tabellenspalte mit Text und Datum nach Datum zu sortieren. Ich habe einen versteckten Bereich vor den Zellen platziert, die nur das Datum enthalten, und benutze textExtraction, um das Datum zu bekommen, so dass ich dann mit dem Sortierer "shortDate" sortieren kann. Wenn ich jedoch auf die Kopfzeile klicke, passiert nichts.Probleme mit textExtraction mit jQuery tablesorter
Ich habe den Code auf jsFiddle getestet und es funktioniert, was das für mich umso überraschender macht. Irgendwelche Ideen darüber, was dies verursachen könnte, würden sehr geschätzt werden.
Die JS:
function dataTable(table) {
$(table).addClass('ui-widget tablesorter');
$(table).children('thead').addClass('ui-widget-header');
$(table).children('tbody').addClass('ui-widget-content');
$(table).children('tbody').children('tr').hover(
function(){$(this).addClass('ui-state-hover');},
function(){$(this).removeClass('ui-state-hover');}
);
}
$(document).ready(function() {
$('.dataTable').each(function() {
dataTable($(this));
});
});
$(document).ready(function(){
$('.dataTable').tablesorter({
widgets: ['staticRow'],
dateFormat: 'ddmmyyyy',
textExtraction: {7 : function(node) {
return $(node).find("span").text();
}
},
headers:{
5:{sorter: "shortDate"},
7:{sorter: "shortDate"}
}
});
$(".dataTable").data('tablesorter').sortList = [[7,1]];
$(".dataTable").trigger('update');
});
Die HTML:
<table class="dataTable" border="1" style="border-collapse:collapse">
<thead>
<tr><th>Version</th><th>Lot</th><th>Lot N°</th><th>Environnement</th><th>Créateur</th><th>Date de création</th><th>Planification</th><th>Etat</th></tr>
</thead>
<tbody id="searchable">
<c:forEach var="version" items="${demandes}" varStatus="status">
<c:forEach var="demandeInstallation" items="${version}" varStatus="status2">
<tr>
<td><c:out value="${livrables[status.index].version}"></c:out></td>
<td><c:out value='${demandeInstallation.lot}'/></td>
<td><fmt:formatNumber value="${demandeInstallation.numeroLot}" pattern="0000"/></td>
<td><c:out value='${demandeInstallation.environnement}'/></td>
<td><c:out value='${demandeInstallation.demandeur}'/></td>
<td><fmt:formatDate value="${demandeInstallation.date}" pattern="dd/MM/yyyy HH:mm"/></td>
<td>
<c:if test="${!empty demandeInstallation.planification}">
<fmt:formatNumber value="${demandeInstallation.planification div 60}" pattern="##"/>:<fmt:formatNumber value="${demandeInstallation.planification mod 60}" pattern="00"/>
</c:if>
</td>
<c:if test="${!empty demandeInstallation.etat.etat}">
<td class="etatDemande_${demandeInstallation.etat.etat}"><fmt:formatDate value="${demandeInstallation.etat.createdOn}" pattern="dd/MM/yyyy HH:mm" var="createdOn"/><span style="display:none"><c:out value="${createdOn}"/></span><s:message code="EtatDemande.${demandeInstallation.etat.etat}" arguments="${createdOn}, ${demandeInstallation.etat.createdBy}"/></td>
</c:if>
</tr>
</c:forEach>
</c:forEach>
</tbody>
</table>
<script type="text/javascript" src="<s:url value="/js/searchbar.js"/>"></script>
</body>
Edit: Der Code für searchBar.js:
var $rows,$pageNumber,$rowsPerPage;
$('#searchBar').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');
$rows.hide().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
var matchesSearch = true;
$(val).each(function(index, value) {
matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
});
return matchesSearch;
}).show();
var j = $pageNumber * $rowsPerPage;
for (i = 0; i < $rows.length; i++){
if($rows.eq(i).is(':visible') && j < $rowsPerPage*($pageNumber + 1)){
j++;
}
else{
$rows.eq(i).hide();
}
}
if (j < $rowsPerPage){
$('#moreResults').hide();
}
else{
$('#moreResults').show();
}
$('#searchTextField').val($(this).val());
});
$(document).ready(function(){
/*for (i = 0; i < $rows.length ; i++){
if (i < $pageNumber*$rowsPerPage || i >= $rowsPerPage*($pageNumber + 1))
{
$rows.eq(i).hide();
}
}*/
$rows = $('#searchable tr');
$pageNumber = $('#pageNumber').val();
$rowsPerPage = $('#rowsPerPage').val();
$('#searchBar').val($('#searchTextField').val());
$('#searchBar').keyup();
});
Edit 2
verwenden ich die Debug und fand, dass ich die tablesorter ein zweites Mal wurde initialisiert, die nicht so änderte ich meinen Code funktionieren:
$(document).ready(function() {
$(".dataTable").data('tablesorter').debug = true;
$(".dataTable").data('tablesorter').textExtraction = {7: function(node) {return $(node).find("span").text();}};
$(".dataTable").data('tablesorter').headers = {5: { sorter: "shortDate" },7: { sorter: "shortDate" }};
$(".dataTable").data('tablesorter').sortList = [[7,1]];
$(".dataTable").trigger('update');
});
Console Ausgabe: Es scheint, dass die Textextraktion nicht angewendet werden, da der Inhalt von Spalte 7 immer noch in der Form "Datum Text Datum Text" statt nur dem ersten Datum vorliegt.
Warum sind Sie überrascht, dass es funktioniert? – gcampbell
Sorry, ich war nicht sehr klar, es funktioniert auf jsFiddle, aber nicht auf meiner Anwendung. _Edited die Frage, um es klarer zu machen_ – anaBad
Was ist ' ">'? – gcampbell