Php 自动滚动循环后的Laravel刷新内容
我想在循环完成时刷新div内容（向下和向上滚动）。现在我可以循环和刷新页面，但效果并不平滑。循环将停止并从一开始重置 所以，我是否可以在每次1个完整循环循环完成时刷新我的页面（或者如果可能，只刷新“”） 这是我的刀锉Php 自动滚动循环后的Laravel刷新内容,php,laravel,loops,refresh,autoscroll,Php,Laravel,Loops,Refresh,Autoscroll,我想在循环完成时刷新div内容（向下和向上滚动）。现在我可以循环和刷新页面，但效果并不平滑。循环将停止并从一开始重置 所以，我是否可以在每次1个完整循环循环完成时刷新我的页面（或者如果可能，只刷新“”） 这是我的刀锉 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q
<!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()},5000,"linear", 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>
.警报信息{
颜色：红色；
}
.行{
左边距：-5px；
右边距：-5px；
}
专栏作家{
浮动：左；
宽度：70%；
填充物：5px；
}
专栏作家{
浮动：左；
宽度：30%；
填充物：5px；
}
.行：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}
th，
运输署{
文本对齐：左对齐；
填充：16px；
}
tr:n个孩子（偶数）{
背景色：#F2F2；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}
#标题{
宽度：100%；
高度：139px；
溢出：隐藏；
}
#右侧{
高度：自动；
背景重复：重复-y；
溢出：隐藏；
位置：绝对位置；
字体大小：16px；
}
#内容{
高度：460px；
溢出：自动；
}
.内部{
位置：相对位置；
顶部：0px；
}
.外部{
溢出：隐藏；
}
兰台
@foreach（$poli_医生作为$poli_医生）
{{$poli_-doctor->nmdokter}{{$poli_-doctor->kddokter}
身份证号码
@foreach（$vw_antrian作为$vw_antrian）
@如果（$vw_antrian['kddokter']=$poli_doctor->kddokter）
{{$vw_antrian['noantri2']}
@恩迪夫
@endforeach
@endforeach
最后一次扫描
{{$get\u lastvalid->noantri2}
$（文档）.ready（函数（）{
setTimeout（函数（）{
location.reload（）；
}, 5000);
$（'tbl_antrian'）。数据表（）；
});
函数autoScrollDown（）{
$（.inner”）.css（{top:-$（.outer”）.outerHeight（）}）//跳回
.animate（{top:0}，5000，“线性”，autoScrollDown）；//并设置动画
}
函数autoScrollUp（）{
$（“.inner”）.css（{top:0}）//跳回
.animate（{top:-$（“.outer”）.outerHeight（）}，5000，“线性”，autoScrollUp）
}
//外部固定高度：
$（'.outer'）.css（{maxHeight:$（'.inner'）.height（）}）；
//内部文件的重复内容：
$（'.inner'）.html（$（'.inner'）.html（）+$（'.inner'）.html（））；
autoScrollUp（）；
//location.reload（）；