Блог

Главная - Вопросы по программированию - После создания динамической html-таблицы в jQuery, применяем другой jQuery (средство сортировки таблиц)

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

#php #jquery #json #html-table

#php #jquery #json #html-таблица

Вопрос:

Я создал HTML-ТАБЛИЦУ из 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>

Ответ №1:

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

 $.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});
});

Ответ №2:

Запрос 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});         
        }
    );
});