jQuery ajax填充html表
如果我有一张桌子：
Col1 Col2 Col3
使用Jquery Ajax从数据库中填充包含我数据的tr元素的最快，最有效的方法是什么？ （除非你有更好的方法）
从webservice返回html代码或在Javascript中动态创建html代码？
此外，我必须支持用户“向下钻取;即，单击一个>或双击该行以打开一个窗格以显示更多信息。（包括另一个表和一个单独的Web服务返回的一些详细信息）
欢迎所有想法！
我在一个使用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("",""); 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（模板）
除非您需要创建数千行，否则性能不仅仅是一个问题。 生成标记的地方实际上是一个设计决策。 您可以生成标记：
- 服务器端，用您选择的模板语言（ASP.NET，PHP，JSP，Django模板……）或
- 客户端，使用JavaScript模板（
$.tmpl， Mustache ……）
客户端（理论上）将减少服务器上的负载，但这也可能不是相关问题。 无论您选择哪种口味，您都应该在整个应用中始终如一地使用它，除非有其他真正令人信服的理由。
从Web服务返回HTML会紧密地耦合您的代码。 这两种方法中较好的方法是在Javascript中创建HTML。
您可以使用jQuery .ajax（）调用来返回JSON对象中的数据，并使用.tmpl（）模板插件来呈现html。
您可以在此处查看模板文档： http ： //api.jquery.com/tmpl/
更新：我发布了一个示例作为另一个问题的答案
这个解决方案非常适合我。
我只是从AJAX PHP调用中检索一个二维JSONed数组。
（使用php函数json_encode（））
然后简单地遍历数组以构造可插入的表行。 如图所示。
$.post("./pdo_select.php", {post_query : view_q }, function(data) { var textToInsert = ''; $.each(data, function(row, rowdata) { textToInsert += ''; $.each(rowdata, function (ele, eledata){ textToInsert += '' + eledata + ' '; }); textToInsert += ' '; }); $("#questions_table").append(textToInsert); }, 'json');
请注意附加的’json’参数。
使用标准jQuery可以轻松地操作整个表，从添加标题行，将一个或多个行或表转换为输入字段。
我想如果你不想，你不必使用PDO例程从数据库中获取详细信息。
下面是使用上面列出的技术构建的表格的图像 