[英]jQuery ajax fill html table
如果我有一张桌子:
<table>
<thead>
<tr>Col1</tr>
<tr>Col2</tr>
<tr>Col3</tr>
</thead>
<tbody>
</tbody>
</table>
使用Jquery Ajax从数据库中填充包含我的数据的tr元素的最快,最有效的方法是什么? (除非你有更好的方法)
从webservice返回html代码或在Javascript中动态创建html代码?
此外,我必须支持用户“向下钻取;即,单击一个>或双击该行以打开一个窗格以显示更多信息。(包括另一个表和一个单独的Web服务返回的一些详细信息)
欢迎所有想法!
从Web服务返回HTML会紧密地耦合您的代码。 两种方法中较好的方法是在Javascript中创建HTML。
您可以使用jQuery .ajax()调用来返回JSON对象中的数据,并使用.tmpl()模板插件来呈现html。
您可以在此处查看模板文档: http : //api.jquery.com/tmpl/
更新:我发布了一个示例作为另一个问题的答案
我在一个使用jQuery和AJAX的大型企业门户网站上工作。 我已经实现了jQuery Templates
和jQuery TableSorter plug-in
来实现这一点。 这是一些示例代码:
Javascript(数据提供者):Data.Lists.js
myorg.data.list.GetListItems ({
webURL: "http://our.awesome.portal.com/Lists",
listName: "Projects List",
caml: caml,
CAMLRowLimit: 6,
callback: function(data) {
var list = {};
//code here that formats some data before binding
list.items = data;
var templateHtml = $('.ptMyProjects').html()
.replace("<!--", "").replace("-->","");
var html = $.tmpl(templateHtml, list);
$('.ptMyProjects').html(html);
//make sortable table
$('.ptMyProjects .tablesorter').tablesorter({
sortList: [[0,0]],
headers: {3: {sorter: false}},
widgets: ['zebra']
});
//class last row
$('.ptMyProjects .tablesorter thead th').last().addClass('last');
//add hover effect
$('.ptMyProjects .tablesorter tbody tr, .tablesorter thead .header').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
//add tooltips
$('.ptMyProjects .vg_icon').tipsy({gravity: 's'});
}
});
HTML(模板)
<div class="ptMyProjects ptTemplate">
<!--
<table class="tablesorter" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr class="gradient_gray">
<th>Title</th>
<th>Status</th>
<th style="border-right: none;">Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{if items.length > 0}}
{{each items}}
<tr class='item' recordid="${ows_ID}">
<td ><a class='{{if ows_Critical_x0020_Project == "1"}}critical{{/if}}' href="${DisplayURL}">${ows_Title}</a> </td>
<td class="status">
<a href="#" class="pstatus">${ows_ProjStatus}</a>
<div style='display: none;'>
{{if ows_ProjComments}}
<div style="padding-bottom: 10px;">${ows_ProjComments}</div>
{{/if}}
<div style="font-weight: bold;">Lasted Edited By ${Editor}</div>
<div style="font-style: italic;">${when}</div>
</div>
</td>
<td>
<div class="ui-widget-default">
<div class="progressbar" value="${ows_PercentComplete}" style="height:100%;"></div>
</div>
</td>
<td class="actions">
{{if ows_ProjStatus != "Completed"}}<a href="#" class="vg_icon tick" title="Mark Completed"></a>{{/if}}
<a href="${EditURL}" class="vg_icon pencil" title="Edit"></a>
<a href="#" class="vg_icon comment" title="Comments"></a>
</td>
</tr>
{{/each}}
{{else}}
<tr><td colspan="4">You have no projects.</td></tr>
{{/if}}
</tbody>
</table>
-->
</div>
这个解决方案非常适合我。
我只是从AJAX PHP调用中检索一个二维JSONed数组。
(使用php函数json_encode())
然后简单地遍历数组以构造可插入的表行。 如图所示。
$.post("./pdo_select.php", {post_query : view_q }, function(data) {
var textToInsert = '';
$.each(data, function(row, rowdata) {
textToInsert += '<tr>';
$.each(rowdata, function (ele, eledata){
textToInsert += '<td>' + eledata + '</td>';
});
textToInsert += '</tr>';
});
$("#questions_table").append(textToInsert);
}, 'json');
请注意附加的'json'参数。
使用标准jQuery可以轻松地操作整个表,从添加标题行,将一个或多个行或表转换为输入字段。
我想如果你不想,你不必使用PDO例程从数据库中获取详细信息。
下面是使用上面列出的技术构建的表格的图像
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.