使用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>

函数SortTable（）{
var=1；
var table=document.getElementById（'场馆列表'）；
var tbody=table.getElementsByTagName（'tbody'）[0]；
var rows=tbody.getElementsByTagName（'tr'）；
var rowArray=新数组（）；
对于（var i=0，length=rows.length；i




while（$row=mysqli\u fetch\u数组（$result））
{
$name=$row['name']；
$img=$row['IMAGE_SRC']；
$addr=$row['ADDRESS']；
$location=$row['location']；
echo“map_函数（'{$addr}'，'{$name}'，'{$img}'）；
?>

目前，我正在将排序列编号sortedOn固定为1，只是为了检查它是否工作，但令我沮丧的是，它不工作。我已经尝试让它工作了很长一段时间了。我对Javascript比较陌生，这是我第一次尝试web开发。期待一个解决方案

---

谢谢。

如果您想用javascript对表中的行进行排序，可以实现

sortable.js

---

我建议您使用PHP

Json\u encode（）将查询结果转换为Json格式

，这样您可以以更简单的方式处理javascript所有数据。

我能够找出我的错误。javascript函数中存在多个错误。第二，表中的第二列缺少。在javascript函数中，基本上，我是在RowCompareSt中比较rowArray对象本身rings函数。我实际上应该将rowArray.value相互映射。

看起来您有PHP语法错误。我认为这与您的问题无关，所以我编辑了您的问题。