сортировка на стороне клиента с использованием JavaScript

Я пытался создать веб-сайт, который извлекает значения из базы данных, а затем реализует такие функции, как сортировка и фильтрация. Я создаю запрос каждый раз, когда фильтр применяется на данный момент, определенно изменится на что-то более эффективное. Для сортировки я хочу реализовать ее на стороне клиента, так как данные уже присутствуют.

Я просмотрел ряд сообщений с этого форума и пришел к фрагменту кода, который я включил в мой. Чтобы дать вам хедз-ап на веб-странице, параметры сортировки включены в качестве переключателей. Всякий раз, когда пользователь нажимает кнопку "Применить", запускается функция javascript, которая сортирует таблицу html, которая заполняется с помощью php.

Вот код:

    <script type="text/javascript">
        function SortTable() {
            var sortedOn = 1;
            var table = document.getElementById('venue_list');
            var tbody = table.getElementsByTagName('tbody')[0];
            var rows = tbody.getElementsByTagName('tr');
            var rowArray = new Array();
            for (var i=0, length=rows.length; i<length; i++) {
                rowArray[i] = new Object;
                rowArray[i].oldIndex = i;
                rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;
            }
            //if (sortOn == sortedOn) { rowArray.reverse(); }
            //else { sortedOn = sortOn; }
            /*
                Decide which function to use from the three:RowCompareNumbers,
                RowCompareDollars or RowCompare (default).
                For first column, I needed numeric comparison.
            */
            if (sortedOn == 1) {
                rowArray.sort(RowCompareStrings);
            }
            else {
                rowArray.sort(RowCompare);
            }
            var newTbody = document.createElement('tbody');
            for (var i=0, length=rowArray.length ; i<length; i++) {
                newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));
            }
            table.replaceChild(newTbody, tbody);
        }
        function RowCompare(a, b) {
            var aVal = a.value;
            var bVal = b.value;
            return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
        }   
        // Compare Strings
        function RowCompareStrings(a, b) {
            var index = b.localeCompare(a);
            return index;
        }
    </script>
    <div style="float: right;margin-right: -100px;" class="box2">
            <h2>Sort by :</h2>
            <input type="radio" id="s1" name="sort" value="1" />
            <label for="f1"><?php echo 'Name'?></label>
            <input type="radio" id="s1" name="sort" value="1" />
            <label for="f1"><?php echo 'Location'?></label>
            <br><br><br>
            <div id="ContactForm" action="#">
                <input name="sort_button" value="Apply"  type = "button" id="sort_button"  class="button" onclick="SortTable();"/>
            </div>
    </div>
    <table>
    <tbody>
    while($row = mysqli_fetch_array($result))
                        {
                            $name = $row['NAME'];
                            $img = $row['IMAGE_SRC'];
                            $addr = $row['ADDRESS'];
                            $location = $row['LOCATION'];

                            echo "<script type='text/javascript'>map_function('{$addr}','{$name}','{$img}');</script>";
                        ?>
                            <tr>
                                <td>
                                    <a href="<?php echo $name?>">
                                        <img src="<?php echo $img.".jpg"?>" height="100" width="100">
                                    </a>
                                </td>
                                <td>
                                    <a href="<?php echo $name?>">
                                        <h3><?php echo $name?></h3>
                                    </a>
                                <td>
                            </tr>                       
                        <?php
                        }
                    ?>
 </tbody>
 </table>

На данный момент я исправляю номер сортировочного столбца, sortedOn до 1, чтобы проверить, работает ли он, но, к моему сожалению, это не так. Я пытаюсь заставить его работать уже довольно давно. Я относительно новичок в Javascript, и это мой первый подход к веб-разработке. Ждем решения.

Благодарю.