После создания динамической HTML-таблицы в JQuery, применяя другой JQuery (сортировщик таблиц) - PullRequest
Новая
       20

После создания динамической HTML-таблицы в JQuery, применяя другой JQuery (сортировщик таблиц)

2 голосов
/ 09 ноября 2011

Я создал HTML TABLE из данных JSON PHP, используя JQuery. После создания таблицы я пытаюсь прикрепить сортировщик таблиц (JQuery) но это не работает. Как решить? Код ниже: 

<script type="text/javascript">
$(document).ready(function() {
        $.getJSON('listnotice.php', function(data) {     

            var table = "";
            $.each(data, function(index,entry) {
                table += '<tr>';
                table += '<td>' +entry["title"] + '</td>';
                table += '<td>' +entry["content"] + '</td>';
                table += '<td>' +entry["date"] + '</td>';
                table += '</tr>';
            });

            table += "</tbody>";
            $("#noticeList").append(table);
           });   

        $("#noticeList").tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"),
                          filterClearContainer: $("#filter-clear-button"),
                          filterColumns: [0],
                          filterCaseSensitive: false});
});
</script>

</head>
<body>
    <table id="noticeList">
        <thead><tr><th>1</th><th>2</th><th>3</th></tr></thead><tbody>

    </tablev>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 09 ноября 2011

Вам необходимо применить сортировщик таблиц в том же обратном вызове, где вы строите таблицу. Вызов getJSON является асинхронным, и, как у вас сейчас, вы применяете TableSortor до того, как вызов завершится, и таблица будет построена. 

$.getJSON('listnotice.php', function(data) {     

    var table = "";
    $.each(data, function(index,entry) {
        table += '<tr>';
        table += '<td>' +entry["title"] + '</td>';
        table += '<td>' +entry["content"] + '</td>';
        table += '<td>' +entry["date"] + '</td>';
        table += '</tr>';
    });

    table += "</tbody>";
    $("#noticeList").append(table)
                    .tablesorter({debug: false, widgets: ['zebra'], sortList [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"),
                          filterClearContainer: $("#filter-clear-button"),
                          filterColumns: [0],
                          filterCaseSensitive: false});
});
0 голосов
/ 09 ноября 2011

Запрос ajax по-прежнему выполняется при вызове плагина .tablesorter(). Если вы переместите сортировщик таблицы в свой обработчик успеха, он должен работать.

Попробуйте это: 

$(document).ready(function() {
    $.getJSON('listnotice.php', 
        function(data) {     
            var table = "";
            $.each(data, function(index,entry) {
                table += '<tr>';
                table += '<td>' +entry["title"] + '</td>';
                table += '<td>' +entry["content"] + '</td>';
                table += '<td>' +entry["date"] + '</td>';
                table += '</tr>';
            });
            table += "</tbody>";

            $("#noticeList").append(table).tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"),
                      filterClearContainer: $("#filter-clear-button"),
                      filterColumns: [0],
                      filterCaseSensitive: false});         
        }
    );
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...