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> 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> of <span id="t1allcount"></span> rows match filter(s)</td>
</tr>
<tr class="text-success">
<td colspan="15">Total Results : ${count}</td>
</tr>
</tfoot>
</table>
</body>
</html>