自动滚动循环后 Laravel 刷新内容

编程问答 2022-05-10

问题描述

我想在循环完成时刷新 div 内容（向下和向上滚动）。现在我可以循环和刷新页面，但效果不流畅。循环将停止并从头开始重置。

那么，我可以在每次 1 个完整循环循环完成时刷新我的页面（或者如果可能的话只刷新 ''）？

这是我的刀片文件

<!DOCTYPE html>
<html>

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <Meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css" />

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

</head>
<style>
    .alert-message {
        color: red;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .columnl {
        float: left;
        width: 70%;
        padding: 5px;
    }

    .columnr {
        float: left;
        width: 30%;
        padding: 5px;
    }

    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    th,td {
        text-align: left;
        padding: 16px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    @media screen and (max-width: 600px) {
        .column {
            width: 100%;
        }
    }

    #header {
        width: 100%;
        height: 139px;
        overflow: hidden;
    }

    #right_side {
        height: auto;
        background-repeat: repeat-y;
        overflow: hidden;
        position: absolute;
        font-size: 16px;
    }

    #content {
        height: 460px;
        overflow: auto;
    }

    .inner {
        position: relative;
        top: 0px;
    }

    .outer {
        overflow: hidden;
    }
</style>

<body>
    <div class="container">
        <div id="header">
            <h2 style="margin-top: 12px; text-align: center" class="alert alert-info">LANTAI</h2>
        </div>
        <div class="row" style="clear: both;margin-top: 18px;">
            <div class="row">
                <div class="columnl">
                    <div class="outer">
                        <div class="inner">
                            @foreach($poli_doctors as $poli_doctor)
                            <br>
                            <h4 class="card-header" style="font-weight:bold; text-align:center;color: blue">
                                {{$poli_doctor->nmdokter}} {{$poli_doctor->kddokter}}</h4>
                            <table id="tbl_antrian" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th style="font-weight:bold; font-size: 20px; text-align:center">ID Number
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($vw_antrians as $vw_antrian)
                                    @if($vw_antrian['kddokter']==$poli_doctor->kddokter)
                                    <tr id="row_{{$vw_antrian['noantri']}}">
                                        <td style="font-weight:bold; font-size: 20px; width:15%; text-align:center">
                                            {{ $vw_antrian['noantri2'] }}</td>
                                    </tr>
                                    @endif
                                    @endforeach
                                </tbody>
                            </table>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="columnr">
                    <div id="right_side">
                        <table>
                            <tr>
                                <th>Last Scan</th>
                            </tr>
                            <tr>
                                <td>{{$get_lastvalid->noantri2}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="{{asset('js/jquery-3.6.0.min.js')}}"></script>
<script>
    $(document).ready(function(){
        setTimeout(function() {
            location.reload();
        },5000);
    $('#tbl_antrian').DataTable();
    });

    function autoScrollDown(){
        $(".inner").css({top:-$(".outer").outerHeight()}) // jump back
               .animate({top:0},5000,"linear",autoScrollDown); // and animate
    }
    function autoScrollUp(){
        $(".inner").css({top:0}) // jump back
                .animate({top:-$(".outer").outerHeight()},autoScrollUp)
    }
    // fix hight of outer:
    $('.outer').css({maxHeight: $('.inner').height()});
    // duplicate content of inner:
    $('.inner').html($('.inner').html() + $('.inner').html());
    autoScrollUp();
    // location.reload();
</script>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

autoscrolllaravellaravelloopsrefresh