使用带有 jQuery tablesorter 的 textExtraction 的问题

Question

我正在尝试按日期对包含一些文本和日期的 table 列进行排序。我在仅包含日期的单元格前面放置了一个隐藏的跨度，并使用 textExtraction 获取日期，以便我可以使用 sorter:"shortDate" 进行排序。但是，当我单击 header 时，什么也没有发生。

我已经在 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 列的内容仍采用 "date text date text" 形式，而不仅仅是第一个日期。

Answer 1

我找不到让 textExtraction 在我的页面上工作的方法，我想到的解决方案是在我要显示的列之前放置一个仅包含要排序的日期的隐藏列。

结果如下所示：

在包含在头部的单独文件 "dataTable.js" 中，为 class table 排序器的任何 table 初始化 table 排序器的代码：

$(document).ready(function () {
    $('.dataTable').tablesorter({
         widgets: ['staticRow'],
         dateFormat: 'ddmmyyyy'  
     }); 
});

在 jsp 包含有问题的 table:

<head>
    <title>Historique</title>
    <%@ include file="/head.jsp" %><!-- This is where dataTable.js is included-->
    <script type="text/javascript">
        $(document).ready(function () {
            $(".dataTable").data('tablesorter').sortList = [[7,1]];
            $(".dataTable").trigger('update');
        });
    </script>
</head>
<body>
    <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 colspan="2">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 style="display:none"><fmt:formatDate value="${demandeInstallation.etat.createdOn}" pattern="dd/MM/yyyy HH:mm"/></td>
                    <td class="etatDemande_${demandeInstallation.etat.etat}"><fmt:formatDate value="${demandeInstallation.etat.createdOn}" pattern="dd/MM/yyyy HH:mm" var="createdOn"/><s:message code="EtatDemande.${demandeInstallation.etat.etat}" arguments="${createdOn}, ${demandeInstallation.etat.createdBy}"/></td>
                    </c:if>
                </tr>
            </c:forEach>
            </c:forEach>
        </tbody>
    </table>

使用带有 jQuery tablesorter 的 textExtraction 的问题

Issues using textExtraction with jQuery tablesorter

javascript

jquery

tablesorter