Сортировать столбец таблицы по ссылке за пределами таблицы

Question

Попытка связать текст (из-за пределов таблицы), который сортирует столбец и помещает пользователя в определенное место внутри таблицы (с тегом привязки)

Пока что мое единственное решение - обновить всю страницу с помощью

Необходимость каждый раз обновлять страницу - это боль для пользователя.

Answer 1

Вы можете использовать библиотеку для этой работы, например, Datatables с источником данных 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/