I have a situation in which my Jquery Ajax script generates HTML table. And another script is meant to filter the table column by providing a dropdown comprising of unique values in that particular column.

If i have static content in html page the filter script works fine. But is not able to read table content when it is generated via Ajax that is during runtime.

Any idea what could be the reason. I also tried to align script in order.

My Ajax script is here:-

$(document).ready(function() {


    $("#getResults").click(function(){ 


             bug = $("#bug").val();
             priority = $("#priority").val();
             component = $("#component").val();
             fixVersion = $("#fixVersion").val();
             dateType = $("#dateType").val();
             fromDate = $("#dp2").val();
             toDate = $("#dp3").val();


            $("#query").empty();

            $("tbody").empty();


            $.post("getRefineSearchResultsPath", {bug:bug,priority:priority,component:component,
                    fixVersion:fixVersion,dateType:dateType,fromDate:fromDate,toDate:toDate },
                    function(data) {

                // setting value for csv report button
                //clear the value attribute for button first
                $("#query_csv").removeAttr("value");

                //setting new value to "value" attribute of the csv button
                $("#query_csv").attr("value", function(){
                    return $(data).find("query").text();
                });

                $("#query").append("<p class='text-success'>Query<legend></legend><small>" +$(data).find("query").text() +"</small></p>");

                var count = 1;

                $(data).find("issue").each(function(){

                    var $issue = $(this);

                    var value = "<tr>";

                    value += "<td>" +count +"</td>";
                    value += "<td>" +$issue.find('issueKey').text() +"</td>";
                    value += "<td>" +$issue.find('type').text() +"</td>";
                    value += "<td><div id='list' class='summary'>" +$issue.find('summary').text() +"</div></td>";
                    value += "<td><div id='list' class='mousescroll'>" +$issue.find('description').text() +"</div></td>";
                    value += "<td>" +$issue.find('priority').text() +"</td>";
                    value += "<td>" +$issue.find('component').text() +"</td>";
                    value += "<td>" +$issue.find('status').text() +"</td>";
                    value += "<td>" +$issue.find('fixVersion').text() +"</td>";
                    value += "<td>" +$issue.find('resolution').text() +"</td>";
                    value += "<td>" +$issue.find('created').text() +"</td>";
                    value += "<td>" +$issue.find('updated').text() +"</td>";
                    value += "<td>" +$issue.find('os').text() +"</td>";
                    value += "<td>" +$issue.find('frequency').text() +"</td>";

                    value += "<td>";

                    var number_of_attachement = $issue.find('attachment').size();

                    if(number_of_attachement > 0){

                        value += "<div id='list' class='attachment'>";
                        value += "<ul class='unstyled'>";

                        $issue.find('attachment').each(function(){

                            var $attachment = $(this);

                            value += "<li>";
                            value += "<a href='#' onclick='document.f1.attachmentName.value='" +$attachment.find('attachmentName').text(); 
                            value += "';document.f1.issueKey.value='"+$attachment.find('attachmentissueKey').text();
                            value += "';document.f1.digest.value='"+$attachment.find('attachmentdigest').text();
                            value += "';document.f1.submit();'>"+$attachment.find('attachmentName').text();
                            value += "</a>";
                            value += "</li>";
                            value += "<br>";
                        });

                        value +="</ul>";
                        value +="</div>";
                    }

                    value += "</td>";
                    value += "</tr>";

                    $("tbody").append(value);

                    count++;


                }); 

            });


        });

});

And my script to filter table is here, I got this script from this link http://www.javascripttoolbox.com/lib/table/

My JSP page is here:-

<html>
<body>
<table class="table table-bordered table-condensed table-hover example sort01 table-autosort:0 table-autofilter table-autopage:10 table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount">

                    <thead >
                    <tr>
                        <th class="table-sortable:numeric" Style="width:3%;">No.</th>  
                            <th class="table-sortable:default" Style="width:5.5%;">Issue Key <br> 
                            </th>

                            <th>Type</th>
                            <th Style="text-align: center;">Summary</th>
                            <th Style="text-align: center;">Description</th>

                            <th class="table-filterable table-sortable:default" id ="priorityColumn" Style="width:5%">Priority</th>

                            <th class="table-filterable table-sortable:default" >Component</th>
                            <th class="table-filterable table-sortable:default" Style="width:5%">Status</th>
                            <th class="table-filterable table-sortable:default">Fix Version</th>
                            <th class="table-filterable table-sortable:default" Style="width:6%">Resolution</th>
                            <th>Created</th>
                            <th>Updated</th>
                            <th>OS</th>
                            <th>Frequency</th>
                            <th>Attachments</th>
                        </tr>
                    </thead>

                    <tbody>



                    </tbody>

                    <tfoot>
                        <tr>
                            <td class="table-page:previous" style="cursor:pointer;"><img src="table/icons/previous.gif" alt="Previous"><small>Prev</small></td>
                            <td colspan="13" style="text-align:center;">Page <span id="t1page"></span>&nbsp;of <span id="t1pages"></span></td>
                            <td class="table-page:next" style="cursor:pointer;">Next <img src="table/icons/next.gif" alt="Previous"></td>
                        </tr>
                        <tr Style="background-color: #dddddd">
                            <td colspan="15"><span id="t1filtercount"></span>&nbsp;of <span id="t1allcount"></span>&nbsp;rows match filter(s)</td>
                        </tr>   
                        <tr class="text-success">
                            <td colspan="15">Total Results : ${count}</td>
                        </tr>
                    </tfoot>
            </table>
</body>
</html>