javascript - 我需要数据库中的一个表来实时刷新

Question

我用PHP调用一个数据库表然后显示在页面上，然后我允许用户拖放列到想要的地方，每次移动都会触发一个函数来实时更新表到什么用户选择，但不更新表示其顺序的行。如 gif 所示重新加载页面时，此问题已修复

Link to Gif

我试过选择表格然后调用 table.reload()，我也试过在它旁边制作一个单独的静态表格，当用户拖放列时，其数字永远不会改变并且不会移动, 让数字实时更新或后一种选择都很棒。

表格代码

<div class='container'>
    <h3 class='text-center'>La Liga Picks</h3>
    <table class='table table-bordered' id='myTable'>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Definition</th>
        </tr>
        <tbody class='row_position'>"?>
        <?php

        require('db_config.php');
        $tablename = $_SESSION['username'] . "_laliga";
        $_SESSION['tablename'] = $tablename;
        $sql = "SELECT * FROM $tablename ORDER BY position_order";
        $users = $mysqli->query($sql);
        while($user = $users->fetch_assoc()){

        ?>
            <tr  id="<?php echo $user['id'] ?>">
                <td><?php echo $user['position_order'] ?></td>
                <td><?php echo $user['title'] ?></td>
                <td><?php echo $user['description'] ?></td>
            </tr>
        <?php } ?>
        </tbody>
    </table> <?php } ?>

允许编辑和与数据库对话的函数

<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(){
            var table = document.getElementById("myTable");
            table.reload(forcedReload);


        }
    })
}

正如在 gif 中看到的那样，我希望最左边的行中的数字也随着列的移动而更新，如果用户重新加载页面，它们也会更新，但这并不理想

Answer 1

向第一个单元格添加一个类，然后在行中调用该单元格并更改其文本值。

<div class='container'>
        <h3 class='text-center'>La Liga Picks</h3>
        <table class='table table-bordered' id='myTable'>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Definition</th>
            </tr>
            <tbody class='row_position'>"?>
            <?php

            require('db_config.php');
            $tablename = $_SESSION['username'] . "_laliga";
            $_SESSION['tablename'] = $tablename;
            $sql = "SELECT * FROM $tablename ORDER BY position_order";
            $users = $mysqli->query($sql);
            while($user = $users->fetch_assoc()){

            ?>
                <tr  id="<?php echo $user['id'] ?>">
                    <td class="positionOrder"><?php echo $user['position_order'] ?></td>
                    <td><?php echo $user['title'] ?></td>
                    <td><?php echo $user['description'] ?></td>
                </tr>
            <?php } ?>
            </tbody>
        </table> <?php } ?>


    $('.row_position>tr').each(function(i,v) {
                $(this).find('.positionOrder').text(i+1);
                selectedData.push($(this).attr("id"));
            });