Home/ Questions/Q 6826049
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:06:07+00:00

I have created HTML TABLE from JSON data of PHP using JQuery. After creating

  • 0

I have created HTML TABLE from JSON data of PHP using JQuery.
After creating table, I try to attach table sorter (JQuery)
but, it doesn’t work. How to solve? Code below:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to apply the tablesorter in the same callback where you are building the table. The getJSON call is asynchronous and the way you have it now, you’re applying tablesorter before the call returns and the table is built.

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