Question

我一直在尝试构建一个从数据库中检索值的网站，然后实现排序和过滤等功能。我正在构建查询，每次应用过滤器时，现在肯定会更改为更高效的东西。对于排序，我想在客户端本身实现它，因为数据已经存在。

我浏览了这个论坛的一些帖子，并得到了我在其中的一段代码。为了让您在网页上进行翻版，排序选项包含在单选按钮中。每当用户点击“应用”按钮时，会触发一个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的新手，这是我第一次接受Web开发。期待一个解决方案。

感谢。

Answer 1

如果你想要的是用javascript对表的行进行排序，你可以实现sortable.js。

http://www.kryogenix.org/code/browser/sorttable/

我建议你使用PHP json_encode()将查询结果转换为Json格式，这样你就可以用更简单的方式处理javascript所有数据。

Answer 2

我能弄清楚我的错误。 javascript函数中存在多个错误。其次，表中缺少第二列。在javascript函数中，基本上，我在RowCompareStrings函数中比较了rowArray对象本身。我实际上应该将rowArray.value相互映射。

客户端使用javascript排序

2 个答案: