Question

我正在尝试对包含一些文本和日期的日期的表列进行排序。我在一个只包含日期的单元格前面放了一个隐藏的跨度，并使用textExtraction来获取日期，以便我可以使用sorter进行排序：“shortDate”。但是当我点击标题时没有任何反应。

我已经测试了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列的内容仍然是“日期文本日期文本”的形式，而不仅仅是第一个日期。

Answer 1

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

结果如下：

在一个单独的文件中＆＃34; dataTable.js＆＃34;包含在头部的代码，用于为类tablesorter的任何表初始化tableSorter：

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

在包含有问题的表的jsp中：

<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>

使用textExtraction和jQuery tablesorter的问题

1 个答案: