我们有一个使用以下代码通过 jQuery ajax 填充的表：
$.ajax({
type: "POST",
cache: false,
url: "/files/event_lister.php", // script that gets data from
// DB and responds with JSON sample shown below
data: input_data,
dataType: "json",
success: function(data) {
var html = "";
$.each(data["events"], function(id, event) {
course_url = "/courses/" + group_titles[event["ProgramGroup"]] +
"/" + url_titles[event["ProgramCode"]] + "/" +
event["EventCode"] ;
html += "<tr>" +
" <td>" + event["Course_Type"] + "</td>" +
" <td>" + event["FormalDate"] + "</td>" +
" <td>" + event_lookup[event["ProgramCode"]] + "</td>" +
" <td>" + (parseInt(event["Price"]) > 0 ? "$" + parseInt(event["Price"]) : " ") + "</td>" +
" <td class="nb">" +
" <a href=\"" + course_url + "\">Details</a>" +
" </td>" +
" </tr>";
});
if (html == "") {
html="<tr><td colspan=5 class="fullspan"><p>No Results to display.</p></td></tr>";
}
$("#events_tbody").html(html); // #events_body is tbody of table
}
});
我正在尝试修改此小提琴中的示例代码以使用我的数据：
http://jsfiddle.net/Mrbaseball34/aEypQ/
上面列出的第二个小提琴中有 JSON 数据...
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="lb">Location<a ng-click="sort_by('Course_Type')"><i class="icon-sort"></i></a></th>
<th width="75px">Date<a ng-click="sort_by('FormalDate')"><i class="icon-sort"></i></a></th>
<th>Program<a ng-click="sort_by('Program')"><i class="icon-sort"></i></a></th>
<th>Cost</th>
<th>Information</th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length)"
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>{{item.Course_Type}}</td>
<td>{{item.FormalDate}}</td>
<td>{{item.Program}}</td>
<td>{{item.Price}}</td>
<td>{{item.Info}}</td>
</tr>
</tbody>
</table>
数据不可编辑，因此双向不是问题。我们只填写表格，用户点击 course_url 链接将课程添加到我们的购物车。