Question

我有以下内容填充我的表格：

if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) {
    for (var i = 0; i < jsonObj[0].array.length; i++) {
        var table_row = "<tr><td>" + jsonObj[0].array[i].siteId + "</td>";

        var date = new Date(0); 
        date.setUTCSeconds(jsonObj[0].array[i].time);
        table_row = table_row + "<td>" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "</td>";
        table_row = table_row + "<td>" + jsonObj[0].array[i].field1 + "</td>";
        table_row = table_row + "<td>" + jsonObj[0].array[i].field2 + "</td>";
        table_row = table_row + "<td>" + jsonObj[0].array[i].field3 + "</td>";
        table_row = table_row + "<td>" + jsonObj[0].array[i].field4 + "</td>";

        var totalCount = jsonObj[0].array[i].field1 + jsonObj[0].array[i].field2 + jsonObj[0].array[i].field3 + + jsonObj[0].array[i].field4;

        if (totalCount > 100) {
            table_row = table_row + totalCount + "</td></tr>";
        } else if (totalCount > 80){
            table_row = table_row + totalCount + "</td></tr>";
        } else {
            table_row = table_row + totalCount + "</td></tr>";
        }

        $("#my-table").find("#my-table-body").append(table_row);
    }
}

我的.html文件中的表格有以下标记：

<table id="my-table" style="height:200px; width:1020px" class="table table-bordered">
            <thead>
                <tr>
                    <th>Field 1 Title</th>
                    <th>Field 2 Title</th>
                    <th>Field 3 Title</th>
                    <th>Field 4 Title</th>
                </tr>
            </thead>
            <tbody id="my-table-body">
            </tbody>
        </table>

我想让每个列都可以排序。因此，当我们在表上选择“Field1 Title”时，它应该在我的JavaScript中调用一个函数来对表进行排序。任何人都可以帮助，我已经尝试过TableSorter但它似乎无法使用此功能：

$(document).ready(function() {
$("#my-table").tablesorter()
});

Answer 1

试试这个（清理它只是＃34;触摸＆＃34; DOM一次）：

if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) {
    var table_rows = "";
    for (var i = 0; i < jsonObj[0].array.length; i++) {
        table_row += "<tr><td>" + jsonObj[0].array[i].siteId + "</td>";

        var date = new Date(0); 
        date.setUTCSeconds(jsonObj[0].array[i].time);
        table_row += "<td>" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "</td>" +
            "<td>" + jsonObj[0].array[i].field1 + "</td>" +
            "<td>" + jsonObj[0].array[i].field2 + "</td>" +
            "<td>" + jsonObj[0].array[i].field3 + "</td>" +
            "<td>" + jsonObj[0].array[i].field4 + "</td>";

        var totalCount = jsonObj[0].array[i].field1 + jsonObj[0].array[i].field2 + jsonObj[0].array[i].field3 + + jsonObj[0].array[i].field4;

        /* I'm not sure what this is about
        if (totalCount > 100) {
            table_row = table_row + totalCount + "</td></tr>";
        } else if (totalCount > 80){
            table_row = table_row + totalCount + "</td></tr>";
        } else {
            table_row = table_row + totalCount + "</td></tr>";
        }
        but, the following does the same thing
        (and adds the missing opening "<td>"):
        */
        table_row += "<td>" + totalCount + "</td></tr>";

    }
    $("#my-table-body").append(table_row);
    $('#my-table').tablesorter();
}

如果tablesorter已经初始化，重新初始化它，用这个替换最后两行：

$("#my-table-body").append(table_row);
$('#my-table').trigger('update');

对导入的HTML表进行排序

1 个答案: