Question

我的情况是我的Jquery Ajax脚本生成HTML表。另一个脚本是通过提供包含该特定列中的唯一值的下拉列表来过滤表列。

如果我在html页面中有静态内容，则过滤器脚本可以正常工作。但是在运行时通过Ajax生成表内容时无法读取表内容。

任何想法可能是什么原因。我还尝试按顺序对齐脚本。

我的Ajax脚本在这里： -

$(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++;


                }); 

            });


        });

});

我的脚本过滤表就在这里，我从这个链接http://www.javascripttoolbox.com/lib/table/

获得了这个脚本

我的JSP页面在这里： -

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

Answer 1

问题可能是过滤器脚本在页面加载时读取初始表数据并存储一个大对象，然后进行过滤。你AJAX明显改变了html而不是数据对象。

粗略一瞥并在支持文档中搜索文本并未向我显示对AJAX的任何支持。它似乎也不包含destroy方法，因此您可以在AJAX之后重新初始化。脚本的API看起来也不是很强大。

我建议你寻找一个支持ajax的集成表系统，比如datatables.js或jQgrid。两者都保持积极发展并被广泛使用

一个Javascript无法读取ajax脚本生成的数据

1 个答案: