Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery tablesorter的textExtraction时出现的问题

Javascript 使用jQuery tablesorter的textExtraction时出现的问题

javascript jquery

Javascript 使用jQuery tablesorter的textExtraction时出现的问题,javascript,jquery,tablesorter,Javascript,Jquery,Tablesorter,我试图对包含一些文本和日期的表列进行排序。我在只包含日期的单元格前面放置了一个隐藏的空格，并使用文本提取来获取日期，这样我就可以使用排序器进行排序：“shortDate”。但是，当我点击标题时，什么也没有发生 我已经在JSFIDLE上测试了代码，它可以工作，这让我更加惊讶。任何关于可能导致这种情况的想法都将不胜感激 JS： function dataTable(table) { $(table).addClass('ui-widget tablesorter'); $(table).child

我试图对包含一些文本和日期的表列进行排序。我在只包含日期的单元格前面放置了一个隐藏的空格，并使用文本提取来获取日期，这样我就可以使用排序器进行排序：“shortDate”。但是，当我点击标题时，什么也没有发生

我已经在JSFIDLE上测试了代码，它可以工作，这让我更加惊讶。任何关于可能导致这种情况的想法都将不胜感激

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>
控制台输出： 似乎没有应用文本提取，因为第7列的内容仍然是“日期文本-日期文本”形式，而不仅仅是第一个日期

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

结果如下所示：

在head中包含的单独文件“dataTable.js”中，为类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>


历史的
$（文档）.ready（函数（）{
$（“.dataTable”）.data（'tablesorter'）.sortList=[[7,1]]；
$（“.dataTable”）.trigger（'update'）；
});
版本地块N°环境保护区规划区
:
为什么您对它的工作方式感到惊讶？抱歉，我不太清楚，它在JSFIDLE上工作，但在我的应用程序上不工作。编辑问题使其更清晰什么是
？这是我用来动态搜索表的脚本。你能在JSFIDLE上共享演示的链接吗？您使用的是什么版本的tablesorter？ 
$(document).ready(function () {
    $('.dataTable').tablesorter({
         widgets: ['staticRow'],
         dateFormat: 'ddmmyyyy'  
     }); 
});

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