jQuery Sortable very slow-CodePudding

i have sortable problem in jquey. In case of 1000 records, the page takes about 5 seconds to load. Can it be optimized?

Ultimately, the database will have 4,000 records

<tbody >
            <?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>

CodePudding user response：

I found a solution. The problem was jquery version 1.12.1 I changed to version 1.11.4 and it works fine.

CodePudding user response：

Your are doing it wrong.

Problems:

Your are doing client side processing. You should use server side processing.
You are fetching all the records which will slow down the serve maybe crash it due to bandwidth.

There are 2 solutions 1st one is Complex and 2nd is easy:

Solution 1: Write your own jQuery which interact with PHP and get first 10, 20 or maximum 50 records. Add pagination so when you click on 2 tab in the pagination it will fetch next 10, 20 or maximum 50 record. You also have to write your own query to sort the table.

Solution 2: Use Data Tables to handle these things also do it in server side processing I am mentioning links below which can help you.

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