Question

我使用PHP调用数据库表，然后将其显示在页面上，然后允许用户将列拖放到所需的位置，每次移动都会触发一个功能，以实时更新表的内容。用户选择但不更新说明其顺序的行。如gif所示，重新加载页面后，此问题已解决。

initStyleOption()

我尝试过选择表格，然后调用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"));
            });

我需要数据库中的表来实时刷新

1 个答案: