ajax后如何动态生成表列？答案

【问题标题】：How Do I generate table columns dynamically after ajax?ajax后如何动态生成表列？
【发布时间】：2013-09-06 00:20:50
【问题描述】：

我将 jQuery (1.9.1) 与 jQuery Mobile (1.3.0) 一起使用。我在使用 JQM 中的回流表时遇到问题。当我通过 AJAX 从脚本中获取我的 JSON 数据以向我的表中添加更多行时，在我触发刷新并在表上创建后不会生成回流表标题。这是我的代码：

HTML/PHP

'<table data-role="table" id="itemTable" data-mode="reflow" class="ui-responsive table-stroke" style="display:table;">' .
    '<thead>' .
        '<tr>' .
            '<th data-priority="1">Location</th>' .
            '<th>Name</th>' .
            '<th data-priority="3">Barcode</th>' .
            '<th data-priority="4">Needed</th>' .
            '<th data-priority="5">Scanned</th>' .
        '</tr>' .
    '</thead>' .
    '<tbody>' .
        $tableData .
    '</tbody>' .
'</table>' .

JavaScript

$('.getOrder, .getStoreOrder').on('vclick', function(e) {
    e.preventDefault();
    var sel =   this;
    var theLink =   $(this).attr('href');
    if (activeOrder === true) {
        return false;
    }
    $.ajax({
        url: 'ajax.php',
        data: {
            pa: ($(sel).hasClass('getStoreOrder') ? 'store' : '') + 'order'
        },
        dataType: 'json',
        beforeSend: function() {
            $.mobile.showPageLoadingMsg();
            $('#itemTable tbody').html('');
            $('#leftPanel ul li').not(':first-child').remove();
        },
        success: function(data) {
            testVar =   data;
            var i;
            for (i=0; i <= data.length -1; i++) {

                $('#itemTable tbody').append(   '' +
                    '<tr id="item' + (i+1) + '">' +
                        '<td><span>' + data[i].Location + '</span></td>' +
                        '<td><a onclick="showImageOverlay(\'' + data[i].Image + '\');">' + data[i].Name + '</a></td>' +
                        '<td>' + data[i].Barcode + '</td>' +
                        '<td>' + data[i].Qty + '</td>' +
                        '<td>0</td>' +
                    '</tr>' +
                '');
                $('#leftPanel ul').append(  '' +
                    '<li>' +
                        '<a href="#item' + (i+1) + '" class="itemLink" onclick="changeItem(\'item' + (i+1) + '\')">' +
                            'Item ' + (i+1) +
                        '</a>' +
                    '</li>' +
                '');
            }
            $('#itemTable').trigger('refresh');
            $('#itemTable').trigger('create');
            $('#leftPanel #leftUl').listview('refresh');
        },
        complete: function() {
            $('#rightPanel', '.ui-page-active').panel('close');
            $.mobile.hidePageLoadingMsg();
            //pageChange(theLink);
        }
    });
});

AJAX 确实成功并按照我希望的方式将我的行添加到表中。我的问题是如何触发 JQM 添加回流列名称。

我知道我可以使用 <b class="ui-table-cell-label">Column Name</b> 到我的行追加来添加列名，但我希望它动态完成，这样我在更改我的 HTML 时就不必更改 jQuery。

谢谢。

【问题讨论】：

标签： php jquery jquery-mobile

【解决方案1】：

在我看来，最好这样做：$('#tableContainer').load('revisedTable.php?json=yourJsonString');

这样你是在 php 而不是 javascript 中进行表格布局。

【讨论】：

我不太喜欢这个解决方案，因为它会导致很多不必要的开销，而不是仅仅从 ajax 获取 JSON 并让 javascript 添加 html。我也在编辑一个面板，所以加载一个新表已经出来了。
@Mic1780 好的，在您的情况下，这可能不是最好的解决方案，但我不会说某些 html 标记与 json 字符串相比开销很大，而且它会更快在较慢的客户端机器上，而不是使用 javascript 渲染 html
当我已经绑定了表格布局和事件时，您是说通过 ajax 发送整个表格，包括标签样式、类、数据等。只是听起来适得其反。但我非常感谢您的意见 =)

【解决方案2】：

想通了。结果发现 jQuery Mobile 1.3.0 版没有实现正确的.table('refresh') 方法。我通过升级到具有我需要的正确方法的 jQuery Mobile 版本 1.3.1 解决了这个问题。

【讨论】：