0

我有一种情况,我的 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>
4

1 回答 1

0

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

粗略地浏览和搜索支持文档中的文本并没有发现对我来说对 AJAX 的任何支持。它似乎也不包含destroy方法,因此您可以在 AJAX 之后重新初始化。脚本的 API 看起来也不是很健壮。

我建议您寻找支持 ajax 的集成表系统,例如 datatables.js 或 jQgrid。两者都在积极开发中并被广泛使用

于 2012-10-30T23:10:34.060 回答