1
我正在嘗試按日期排序包含一些文本和日期的表列。我在前面放置了一個隱藏的跨度，僅包含日期，並使用textExtraction來獲取日期，以便我可以使用分揀器「shortDate」進行排序。但是當我點擊標題時什麼也沒有發生。使用textExtraction與jQuery tablesorter的問題
我測試了jsFiddle上的代碼，它的工作原理讓我對這一切更加驚訝。任何想法可能會導致這一點將不勝感激。
的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');
});
的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>
編輯：用於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();
});
編輯2
我使用的調試和發現我是初始化的tablesorter不工作，所以我改變了我的代碼，第二次：
$(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');
});
控制檯輸出： 看來，文本提取不因爲列7的內容仍然以「日期文本日期文本」的形式而不是僅僅第一個日期來應用。
你爲什麼驚訝它的工作原理？ – gcampbell
對不起，我不是很清楚，它適用於jsFiddle，但不適用於我的應用程序。 _編輯問題以使其更清晰_ – anaBad
什麼是」>>'？ – gcampbell