动态 JQuery UI 中的表排序器不起作用

Tablesorter in dynamic JQuery UI doesn't work

本文关键字：排序 不起作用 JQuery UI 动态      更新时间：2023-09-26

这是我在这个网站上的第一篇文章，我发誓我已经搜索了我问题的答案。也许我在我读过的主题中错过了一些东西。（对不起我的英语，我是法国人。

当用户执行 clic 时，我创建一个对话框，然后用 ajax 结果（具有特定内容的表）填充此对话框。这是我的代码：

包括

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="../tablesorter/jquery.tablesorter.js"></script>

我的 js 函数

function click_like(e, idProjet) {
    var evt = e ? e:window.event;
    if (evt.stopPropagation)    
        evt.stopPropagation();
    if (evt.cancelBubble!=null) 
        evt.cancelBubble = true;
    if(document.getElementById("dialog") != null) {
        $('#dialog').remove();
    }
    $('#projets').append("<div id='dialog' style='display: none;'></div>");
    $( "#dialog" ).dialog(
    {
        title: 'Projet '+idProjet,
        autoOpen: false,        
        height: 400,
        width: 400,
        close: function(event, ui) {
            $(this).dialog('destroy').remove();
            $('#dialog').remove();          
        }
    }); 
    $( "#dialog" ).load('./../js/js_get_etudiants_interesses.php?idProjet='+idProjet).dialog('open');
}

Php 文件

<?php
    //php things
?>
<p> Les étudiants intéressés sont: </p>
<table id="tous_les_etudiants" class="tablesorter">
    <thead>
        <tr>
            <td> Nom </td>
            <td> Prénom </td>
            <td> Spécialité </td>
            <td> Email </td>
        </tr>
    </thead>
    <tbody>
<?php
    foreach($etudiants AS $etudiant) {
        echo '<tr>'; 
        echo '<td>'.$etudiant->get_NOM().'</td>';
        echo '<td>'.$etudiant->get_PRENOM().'</td>';
        echo '<td>'.$etudiant->get_SPECIALITE().'</td>';
        echo '<td>'.$etudiant->get_EMAIL().'</td>';
        echo '</tr>';
    }
?>
    </tbody>
</table>
<script>
    $("#tous_les_etudiants").tablesorter();
</script>

问题是我没有收到任何错误，表格不可排序，但是样式有效。在其他表（不是按需生成的）上，它工作正常。我已经看到了这个线程，但它没有答案为什么jquery...在这里，但我很确定我在创建div 后进行了表排序器调用。我试图在调用的 php 文件中进行调用，也是在我的 js 函数结束时。也许你可以指出我为什么愚蠢，因为我确信这是愚蠢的。感谢您的阅读，如果答案已经存在，请道歉。

在

对话框窗口可见后，需要初始化表排序器（演示）：

.HTML

<button id="opener">Open Dialog</button>
<div id="dialog" title="Basic dialog">
    <table class="tablesorter">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

脚本

$(function () {
    $("#opener").click(function () {
        $("#dialog").dialog("open");
    });
    $("#dialog").dialog({
        autoOpen: false,
        open: function (event, ui) {
            $('.ui-dialog table').tablesorter({
                theme: 'blue'
            });
        }
    });
});

更新：如果您计划将信息加载到对话框中，则此方法（dialog().load().dialog('open');）不正确，因为未考虑ajax的异步性质。请改用load()函数的回调方法：

$( "#dialog" ).load('./../js/js_get_etudiants_interesses.php?idProjet='+idProjet, function(){
    $( "#dialog" ).dialog('open');
});
相关文章：