skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

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

    This thread also describes how changing the jQuery version changes performance:

    enter link description here


  2. Your are doing it wrong.

    Problems:

    1. Your are doing client side processing. You should use server side processing.
    2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search