Question

任何人都可以帮我弄清楚这里发生了什么？表＃1和表＃2生成相同的表格，除了表＃2缺少排序箭头并缺少排序和搜索功能。我希望他们的工作方式相同。关于修复的任何想法？

我正在尝试对我拥有的桌子进行软编码。该表正在排序，并通过DataTables具有搜索功能。以下代码创建一个表格，其外观和行为完全符合我的要求：

表＃1：（。html）

<div>
<table id="services-status-table" class="table table-striped table-hover">
<thead>
<tr class="info">
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</tr>
</thead>
    <tbody id="sortable-cells">
    <tr>
        <td>Element #1</td>
        <td>Element  #2</td>
        <td>Element  #3</td>
    </tr>
    <tr>
        <td>Element  #4</td>
        <td>Element  #5</td>
        <td>Element  #6</td>
    </tr>
    </tbody>
</table>
</div>
<script src="search-controller.js"></script>
<script>
    $.getScript("table-sort-controller.js", function () {
        sortTable("services-status-table")
    });
</script>

我需要通过JSON从URL填充此表，同时保持搜索和排序功能。我用以下代码替换了上面的代码：

表＃2 （。html）

<div>
<table id="services-status-table" class="table table-striped table-hover "></table>
</div>
<script>
$.ajax({
    url: "http://myserver:8080/myurl/"
    }).then(function(data) {
    var table = "<thead>";
    table += "<tr class='info'>";
    table += "<th>First Column</th>";
    table += "<th>Second Column</th>";
    table += "<th>Third Column</th>";
    table += "</tr>";
    table += "</thead>";
    table += "<tbody id='sortable-cells'>";
    data = JSON.stringify(data);
    alert(data);
    var json = JSON.parse(data);
    for(var element in json){
        var firstElement = json[element].first;
        var secondElement = json[element].second;
        var thirdElement = json[element].third;
        table += "<tr>";
        table += "<td>" + firstElement + "</td>";
        table += "<td>" + secondElement + "</td>";
        table += "<td>" + thirdElement + "</td>";
        table += "</tr>";
    }
    table += "</tbody>";
    document.getElementById("services-status-table").innerHTML = table;
});
</script>
<script src="search-controller.js"></script>
<script>
    $.getScript("table-sort-controller.js", function () {
        sortTable("services-status-table")
    });
</script>

进行此更改后，该表看起来与硬编码版本相同，但我的搜索或排序功能都不存在。它也没有显示排序图标。看起来底部的两个脚本永远不会被运行，但是当在它们中插入警报时，它每次都会触发。如果需要，这里是search-controller.js和table-sort-controller.js，但我认为问题不在这里：

搜索-controller.js：

var $rows = $('#sortable-cells tr');
$('#search').keyup(function () {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function () {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

$("#search-bar").submit(function (event) {
    event.preventDefault();
});

表格排序-controller.js：

function sortTable(id) {
alert("sorting table");
    $(document).ready(function () {
        $("#" + id).DataTable(
            {
                searching: false,
                info: false,
                paging: false
            }
        );
    });
};

我一直试图解决这个问题几天（显然我是JS的新手），我仍然被卡住了。我能够在data-tables.js的第4245行（来自DataTables）收到错误Uncaught TypeError: Cannot read property 'aDataSort' of undefined，但似乎没有任何协助可以解决此错误。虽然对此错误存在很多疑问，但没有解决方案：

Don't bother viewing these links...they are just to show the lack of knowledge associated with this problem
(http://demoscripts.info/28454203/jquery-datatables-cannot-read-property-adatasort-of-undefined.html)
(http://datatables.net/forums/discussion/21965/error-uncaught-typeerror-cannot-read-property-adatasort-of-undefined)
(https://groups.google.com/forum/#!topic/web2py/2PsyOKAOztk)
(https://github.com/l-lin/angular-datatables/issues/122)

我发现错误的唯一“解决方案”是here，但它似乎与我的问题不符。

关于如何使软编码表具有与硬编码表相同的搜索和排序功能的任何想法？

使用DataTables动态创建时，表具有意外行为

0 个答案: