我通过ajax数据后滚动充值有点问题,我步骤显示..
的js
$('select#mes').on('change',function(){
var valor = $(this).val();
var route = "../../public/ADIC/ListaM";
var token = document.getElementById('token').getAttribute('content')
if(valor != null){
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{mes: valor},
beforeSend: function () {
$("#resultado").html('<i class="fa fa-refresh fa-spin"></i>');
$('#limpiar tbody').empty();
},
success: function(data){
$("#resultado").html('');
var tbody = $('.table.table-striped > tbody');
$(data.users).each(function(index, user){
if(user.Check_J1 == 1 && user.Check_J2 == 1 ){
$('<tr class="success" />')
.append($('<td />').html(user.Fecha))
.append($('<td />').html(user.Cancha))
.append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')' ))
.append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1 ))
.append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2 ))
.append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>'))
.appendTo(tbody);
}else{
$('<tr class="danger" />')
.append($('<td />').html(user.Fecha))
.append($('<td />').html(user.Cancha))
.append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')' ))
.append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1 ))
.append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2 ))
.append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>'))
.appendTo(tbody);
}
});
$('.register').click(function() {
var storeCode = $(this).data('storeCode');
$("#capa_modal").show();
$("#capa_para_edicion").show();
var url = storeCode+"/edit";
$.get(url,function(resul){
$("#capa_para_edicion").html(resul);
});
});
},
error: function() {
}
});
}else{
}
});
这个java它的作用是收集一个selectbox的变量并制作一个ajax语句来收集数据并显示在表中
同时创建一个按钮,用posivilidad打开一个模态窗口来修改信息。
viwer
<div class="form-group">
<div class='row'>
<div class='col-md-1'></div>
<div class='col-md-10'>
@foreach($resp as $respuesta)
{!!Form::hidden('id',$respuesta->id, ['id'=>'id'])!!}
{!!Form::label('numero','Fecha: ')!!}
{!!$respuesta->Fecha!!}<br>
{!!Form::label('numero','Cancha: ')!!}
{!!$respuesta->Cancha!!}<br>
{!!Form::label('nombre','Partido: ')!!}
{!!$respuesta->EquipoA!!} vs {!!$respuesta->EquipoB!!}({!!$respuesta->Categoria!!})<br>
<div id="datos1">
{!!Form::label('nombre','Primer Juez: ')!!}
@if($respuesta->Check_J1 == '1')
{!!$respuesta->Numero_J1!!} - {!!$respuesta->Nombre_J1!!} {!!$respuesta->Apellido_J1!!} <span class="btn label label-success">ok</span>
<span id="show_1" class=" btn label label-warning">Editar</span></a><br>
@else
{!!$respuesta->Numero_J1!!} - {!!$respuesta->Nombre_J1!!} {!!$respuesta->Apellido_J1!!} <span class="btn label label-danger" >Error</span>
<span id="1_juez" class="btn label label-primary">
@foreach($Juez1 as $Juez1)
{!!$Juez1->numero1!!} - {!!$Juez1->nombre1!!} {!!$Juez1->apellido1!!}</span>
{!!Form::hidden('Numero_J1',$Juez1->numero1, ['id'=>'Numero_J1'])!!}
{!!Form::hidden('Nombre_J1',$Juez1->nombre1, ['id'=>'Nombre_J1'])!!}
{!!Form::hidden('Apellido_J1',$Juez1->apellido1, ['id'=>'Apellido_J1'])!!}
@endforeach
<span id="show_1" class=" btn label label-warning">Editar</span></a><br>
@endif
</div>
<div id=edit_1>
<div class='row'>
<div class='col-md-2'>
{!!Form::text('Numero_J1_e',$respuesta->Numero_J1, ['id'=>'Numero_J1_e','class'=>'form-control input-sm ', 'placeholder' => 'Numero'])!!}
</div>
<div class='col-md-3'>
{!!Form::text('Nombre_J1_e',$respuesta->Nombre_J1, ['id'=>'Nombre_J1_e','class'=>'form-control input-sm', 'placeholder' => 'Nombre'])!!}
</div>
<div class='col-md-5'>
{!!Form::text('Apellido_J1_e',$respuesta->Apellido_J1, ['id'=>'Apellido_J1_e','class'=>'form-control input-sm', 'placeholder' => 'Apellido'])!!}
</div>
<div class='col-md-2'>
<span id="1_juez_e" class=" btn label label-success">Confirmar</span></a>
</div>
</div>
</div>
<div id="datos2">
{!!Form::label('nombre','Segundo Juez: ')!!}
@if($respuesta->Check_J2 == '1')
{!!$respuesta->Numero_J2!!} - {!!$respuesta->Nombre_J2!!} {!!$respuesta->Apellido_J2!!} <span class="btn label label-success">ok</span>
<span id="show_2" class=" btn label label-warning">Editar</span></a><br><br>
@else
{!!$respuesta->Numero_J2!!} - {!!$respuesta->Nombre_J2!!} {!!$respuesta->Apellido_J2!!} <span class="btn label label-danger" >Error</span>
@foreach($Juez2 as $Juez2)
@if($Juez2->numero2 !='')
<span id="2_juez" class="btn label label-primary">
{!!$Juez2->numero2!!} - {!!$Juez2->nombre2!!} {!!$Juez2->apellido2!!}</span>
{!!Form::hidden('Numero_J2',$Juez2->numero2, ['id'=>'Numero_J2'])!!}
{!!Form::hidden('Nombre_J2',$Juez2->nombre2, ['id'=>'Nombre_J2'])!!}
{!!Form::hidden('Apellido_J2',$Juez2->apellido2, ['id'=>'Apellido_J2'])!!}
@else
No hay datos
@endif
@endforeach
<span id="show_2" class=" btn label label-warning">Editar</span></a><br>
@endif
</div>
<div id=edit_2>
<div class='row'>
<div class='col-md-2'>
{!!Form::text('Numero_J2_e',$respuesta->Numero_J2, ['id'=>'Numero_J2_e','class'=>'form-control input-sm ', 'placeholder' => 'Numero'])!!}
</div>
<div class='col-md-3'>
{!!Form::text('Nombre_J2_e',$respuesta->Nombre_J2, ['id'=>'Nombre_J2_e','class'=>'form-control input-sm', 'placeholder' => 'Nombre'])!!}
</div>
<div class='col-md-5'>
{!!Form::text('Apellido_J2_e',$respuesta->Apellido_J2, ['id'=>'Apellido_J2_e','class'=>'form-control input-sm', 'placeholder' => 'Apellido'])!!}
</div>
<div class='col-md-2'>
<span id="2_juez_e" class=" btn label label-success">Confirmar</span></a>
</div>
</div>
</div>
{!!Form::hidden('valor',$respuesta->Mes, ['id'=>'valor'])!!}
@endforeach
<a id="salir" class="label label-danger "><i class='fa fa-link'></i> <span>Volver</span></a>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#edit_1").hide();
$("#edit_2").hide();
$('#show_1').click(function(f) {
$("#edit_1").slideToggle();
});
$('#show_2').click(function(r) {
$("#edit_2").slideToggle();
});
$('#1_juez').click(function(e) {
var dato = $("#id").val();
var dato1 = $("#Numero_J1").val();
var dato2 = $("#Nombre_J1").val();
var dato3 = $("#Apellido_J1").val();
var route = "http://localhost/UJOBB/public/ADIC/edito1";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{id: dato, Numero_J1: dato1, Nombre_J1: dato2, Apellido_J1: dato3},
beforeSend: function () {
$("#datos1").html('<i class="fa fa-refresh fa-spin"></i>');
},
success: function() {
$("#datos1").load(dato+"/edit" + " #datos1");
$("#edit_1").hide();
},
error: function() {
}
});
$("#edit_1").hide();
});
$('#2_juez').click(function(e) {
var dato = $("#id").val();
var dato1 = $("#Numero_J2").val();
var dato2 = $("#Nombre_J2").val();
var dato3 = $("#Apellido_J2").val();
var route = "http://localhost/UJOBB/public/ADIC/edito2";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{id: dato, Numero_J2: dato1, Nombre_J2: dato2, Apellido_J2: dato3},
beforeSend: function () {
$("#datos2").html('<i class="fa fa-refresh fa-spin"></i>');
},
success: function() {
$("#datos2").load(dato+"/edit" + " #datos2");
$("#edit_2").hide();
},
error: function() {
}
});
$("#edit_2").hide();
});
$('#1_juez_e').click(function(e) {
var dato = $("#id").val();
var dato1 = $("#Numero_J1_e").val();
var dato2 = $("#Nombre_J1_e").val();
var dato3 = $("#Apellido_J1_e").val();
var route = "http://localhost/UJOBB/public/ADIC/edito1";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{id: dato, Numero_J1: dato1, Nombre_J1: dato2, Apellido_J1: dato3},
beforeSend: function () {
$("#datos1").html('<i class="fa fa-refresh fa-spin"></i>');
},
success: function() {
$("#datos1").load(dato+"/edit" + " #datos1");
$("#edit_1").hide();
},
error: function() {
}
});
});
$('#2_juez_e').click(function(f) {
var dato = $("#id").val();
var dato1 = $("#Numero_J2_e").val();
var dato2 = $("#Nombre_J2_e").val();
var dato3 = $("#Apellido_J2_e").val();
var route = "http://localhost/UJOBB/public/ADIC/edito2";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{id: dato, Numero_J2: dato1, Nombre_J2: dato2, Apellido_J2: dato3},
beforeSend: function () {
$("#datos2").html('<i class="fa fa-refresh fa-spin"></i>');
},
success: function() {
$("#datos2").load(dato+"/edit" + " #datos2");
$("#edit_2").hide();
},
error: function() {
}
});
});
$('#salir').click(function() {
//funcion para ocultar las capas modales
var valor = $("#valor").val();
$("#capa_modal").hide();
$("#capa_para_edicion").hide();
$("#capa_para_edicion").html("");
var route = "../../public/ADIC/ListaM";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{mes: valor},
beforeSend: function () {
$("#resultado").html('<i class="fa fa-refresh fa-spin"></i>');
$('#limpiar tbody').empty();
},
success: function(data){
$("#resultado").html('');
var tbody = $('.table.table-striped > tbody');
$(data.users).each(function(index, user){
if(user.Check_J1 == 1 && user.Check_J2 == 1 ){
$('<tr class="success" />')
.append($('<td />').html(user.Fecha))
.append($('<td />').html(user.Cancha))
.append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')' ))
.append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1 ))
.append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2 ))
.append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>'))
.appendTo(tbody);
}else{
$('<tr class="danger" />')
.append($('<td />').html(user.Fecha))
.append($('<td />').html(user.Cancha))
.append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')' ))
.append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1 ))
.append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2 ))
.append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>'))
.appendTo(tbody);
}
});
$('.register').click(function() {
var storeCode = $(this).data('storeCode');
$("#capa_modal").show();
$("#capa_para_edicion").show();
var url = storeCode+"/edit";
$.get(url,function(resul){
$("#capa_para_edicion").html(resul);
});
});
},
})
});
});
</script>
关闭窗口重新加载信息以显示所做的更改......
问题是,当信息重新充当滚动到顶部时,如果你在最后一排是非常麻烦的,回到你住的地方......
答案 0 :(得分:0)
最后你可以做一个小周期
var y = $(document).scrollTop();
y是确定滚动位置的变量,将其放在js ...
中$(document).scrollTop(y);
然后在重新加载表之后,将导致向下滚动的语句放到上一个poscision