Question

尝试链接文本（从表格外部）以对列进行排序，并将用户放置到表格内的特定位置（带有定位标记）

到目前为止，我唯一的解决方案是使用

刷新整个页面

每次都要刷新页面对用户来说是一个痛苦。

Answer 1

您可以使用库来完成这项工作，例如带有ajax数据源的数据表，请参见此处的示例：https://datatables.net/examples/data_sources/ajax

或者您可以使用以下方式，例如波纹管（考虑将数据存储在数据变量之类的文件中）：

    <table id="dataTable">
        <tr>
            <th><a onclick="sortTableAsc('COUNTRY')">COUNTRY</a></th>
            <th><a onclick="sortTableAsc('LoC')">LOCATION</a></th>
            <th><a onclick="sortTableAsc('BALANCE')">BALANCE</a></th>
            <th><a onclick="sortTableAsc('DATE')">DATE</a></th>
        </tr>
    </table>

    <script>

        var data = [
            { "COUNTRY": "UK", "LoC": "London", "BALANCE": "78,573", "DATE": "1/06/2018" },
            { "COUNTRY": "US", "LoC": "New York", "BALANCE": "43,568", "DATE": "18/05/2018" },
            { "COUNTRY": "PL", "LoC": "Sao Paulo", "BALANCE": "12,362", "DATE": "22/06/2018" },
            { "COUNTRY": "AU", "LoC": "Chicago", "BALANCE": "7,569", "DATE": "1/07/2018" }
        ];

        var table = document.getElementById('dataTable');

        function sortTableAsc(field) {
            if (field != undefined && field != null)
                data = data.sort(function (a, b) {
                    if (a[field] > b[field]) {
                        return 1;
                    }
                    if (a[field] < b[field]) {
                        return -1;
                    }
                    return 0;
                });

            table.querySelectorAll("tr.data").forEach(function(element){ element.remove(); });

            data.forEach(function (object) {
                var tr = document.createElement('tr');
                tr.className = 'data';
                tr.innerHTML = '<td>' + object.COUNTRY + '</td>' +
                    '<td>' + object.LoC + '</td>' +
                    '<td>' + object.BALANCE + '</td>' +
                    '<td>' + object.DATE + '</td>';
                table.appendChild(tr);
            });
        }

        sortTableAsc(null);
    </script>

您可能会看到它在这里运行：https://jsfiddle.net/g31ou46m/1/

从表外部的链接对表列进行排序

1 个答案: