jQuery 可排序非常慢答案

【问题标题】：jQuery Sortable very slowjQuery 可排序非常慢
【发布时间】：2022-09-27 18:33:08
【问题描述】：

我在 jquery 中有可排序的问题。如果有 1000 条记录，页面加载大约需要 5 秒。可以优化吗？

最终，数据库将有 4,000 条记录

<tbody class=\"row_position\">
            <?php
                    while($user = $users->fetch_assoc()){
                ?>
                    <tr id=\"<?php echo $user[\'id\'] ?>\">
                        <td><?php echo $user[\'id\'] ?></td>
                        <td><?php echo $user[\'gid\'] ?></td>
                        <td><?php echo $user[\'name\'] ?></td>
                    </tr>
                <?php 
                    } 
                ?>
                </tbody>

<script type=\"text/javascript\">
    $(\".row_position\").sortable({
        delay: 150,
        stop: function() {
            var selectedData = new Array();
            $(\'.row_position>tr\').each(function() {
                selectedData.push($(this).attr(\"id\"));
                
            });
            
            updateOrder(selectedData);
          
        }
    });
    function updateOrder(data) {
        $.ajax({
            url:\"ajaxPro.php\",
            type:\'post\',
            data:{position:data},
            success:function(data){
                toastr.success(\'Your Change Successfully Saved.\');
            }
        })
    }
</script>

请提供minimal-reproducible-example。
请不要将解决方案公告编辑到问题中。接受（即单击旁边的“打勾”）现有答案之一，如果有的话。如果现有答案尚未涵盖您的解决方案，您还可以创建自己的答案，甚至接受它。比较stackoverflow.com/help/self-answer

标签： jquery

【解决方案1】：

你做错了。

问题：

您正在进行客户端处理。您应该使用服务器端处理。
您正在获取所有会减慢服务速度的记录，这可能会由于带宽而导致服务崩溃。
有两种解决方案第一种很复杂，第二种很简单：

解决方案1：编写您自己的与 PHP 交互的 jQuery，并获取前 10、20 或最多 50 条记录。添加分页，因此当您单击分页中的 2 个选项卡时，它将获取下一个 10、20 或最多 50 条记录。您还必须编写自己的查询来对表进行排序。

解决方案2：使用数据表来处理这些事情也可以在服务器端处理中进行，我在下面提到可以帮助您的链接。

https://www.youtube.com/watch?v=hCAMMB-2B2Q&ab_channel=PhpflowLabs https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html

【讨论】：

1. 问题与 UI 组件（jQuery UI - 可排序）有关。除了获取数据之外，为什么还要让服务器参与其他事情呢？ 2. 对于任何服务器来说，获取 1000 条记录应该很容易。如果不是，您可能有更大的问题。 3. 这不是真正的答案，充其量只是一个建议。
嗨，马克，恕我直言，我们正在讨论速度，以便在这种情况下涉及服务器端处理，希望您理解我的观点。
有点不清楚，因为 OP 没有提供一个很好的例子，但他说性能问题出在可排序插件上，它是一个客户端 ui 组件。
我认为对 1000 条记录进行排序是他/她从数据库中获取几乎每条记录的主要问题，正如您在他/她的代码中看到的那样，并且还告诉数据库中有 4,000 多条记录，所以我认为问题很明显，它将通过使用来解决服务器端处理