我希望能夠同時列出兩個模型的記錄,同時考慮到我目前如何設定查詢以將其與 Ajax 一起使用。
考慮到我的專案的其余部分(AJAX - Laravel),現在我的查詢作業正常。
public function allData(){
$data = Siniestro::orderBy('id','DESC')->get();
return response()->json($data);
}
我試過這樣做,但看起來我做錯了查詢
public function allData(){
$data = Siniestro::orderBy('id','DESC')->get();
$users = User::all();
return response()->json($data, $users);
}
編輯:
Esta es la vista que estoy 回火
這是視圖;我希望通過雄辯的查詢,它顯示我現在按順序排序(orderBy),并且它查找與“where”匹配的欄位;例如 $siniestros = Siniestro::where('estado', 'coordinado')->get();。
編輯 2
dd($用戶)
完整查看代碼
@extends('layouts.app')
@section('content')
<section class="section">
<div class="section-header">
<h3 class="page__heading">Derivar IP</h3>
</div>
<div class="section-body">
<div class="row">
<div class="col-sm-9">
<div class="card">
<div class="card-header">
Inspecciones coordinadas
</div>
<div class="card-body">
<table class="table table-sm m-1 p-1 table-bordered table-hover table-striped tablita" style="width:100%">
<thead>
<tr>
<!-- <th scope="col">#</th> -->
<th scope="col">Siniestro</th>
<th scope="col">Fecha IP</th>
<th scope="col">Modalidad</th>
<th scope="col">Dirección</th>
<th scope="col">Localidad</th>
<th scope="col">Inspector</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-3" style="position:fixed; bottom:550px; right:0px">
<div class="card">
<div class="card-header">
<span id="addT">Asignar IP</span>
<span id="updateT">Asignar IP</span>
</div>
<div class="card-body">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="inspector">Inspector</label>
<input type="text" name="inspector" class="form-control" id="inspector" for="inspector" >
<span class="text-danger" id="instituteError"></span>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<label for="inspector">Inspector</label>
<select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" for="inspector" name="inspector" >
<option selected></option>
<option value="Taller del asegurado">Taller del asegurado</option>
</select>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<label for="emailperito">E-mail</label>
<input type="text" name="emailperito" class="form-control" id="emailperito" for="emailperito">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<label for="telefonoperito">Teléfono</label>
<input type="text" name="telefonoperito" class="form-control" id="telefonoperito" for="telefonoperito">
</div>
</div>
<input type="hidden" id="id">
<button type="submit" id="updateButton" class="btn btn-primary btn-sm" onclick="updateData(event)">Asignar</button>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('javas')
<script>
$(document).ready(function() {
$('.tablita').DataTable({
"serverSide": true,
"ajax": "/teacher/all",
"columns": [
// {data: 'id'},
{data: 'siniestro'},
{data: 'fechaip'},
{data: 'modalidad'},
{data: 'direccion'},
{data: 'localidad'},
{data: 'inspector'},
{data: 'action', name: 'action', orderable: true, searchable: true},
],
});
})
</script>
<script>
$('#addT').hide();
$('#addButton').hide();
$('#updateT').show();
$('#updateButton').show();
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
//---------------------------------------------- Llamar datos de la BD ---------------------------------------------------------------
function allData(){
$.ajax({
type: "GET",
dataType: "json",
url: "/teacher/all",
success: function (response){
var data = ""
$.each(response, function(key, value){
data = data "<tr>"
// data = data "<td>" value.id "</td>"
data = data "<td>" value.siniestro "</td>"
data = data "<td>" value.fechaip "</td>"
data = data "<td>" value.modalidad "</td>"
data = data "<td>" value.direccion "</td>"
data = data "<td>" value.localidad "</td>"
data = data "<td>" value.inspector "</td>"
data = data "<td>"
data = data "<button class='btn btn-info btn-sm' onclick='editData(" value.id ")'>Asignar IP</button>"
data = data "</td>"
data = data "</tr>"
})
$('tbody').html(data);
}
})
}
// --------------------------------------------- fin de llamar datos de la DB ----------------------------------------------------------
allData();
// --------------------------------------------- Limpiar los campos despues del submit -------------------------------------------------
function clearData(){
$('#siniestro').val('');
$('#fechaip').val('');
$('#inspector').val('');
$('#nameError').text('');
$('#titleError').text('');
$('#instituteError').text('');
}
// --------------------------------------------- fin de limpiar los campos despues del submit -------------------------------------------------
// --------------------------------------------- Agregar registros a la table de BD -------------------------------------------------
function addData(){
var siniestro = $('#siniestro').val();
var fechaip = $('#fechaip').val();
var inspector = $('#inspector').val();
$.ajax({
type: "POST",
dataType: "Json",
data: {siniestro:siniestro, fechaip:fechaip, inspector:inspector},
url:"/teacher/store/",
success: function(data){
allData();
clearData();
console.log('datos agregados con éxito');
},
error: function(error){
$('#nameError').text(error.responseJSON.errors.name);
$('#titleError').text(error.responseJSON.errors.title);
$('#instituteError').text(error.responseJSON.errors.institute);
}
})
}
// --------------------------------------------- fin de agregar registros a la table de BD -------------------------------------------------
// --------------------------------------------- Editar registros a la table de BD ---------------------------------------------------------
function editData(id){
$.ajax({
type:"get",
dataType:"json",
url:"/teacher/edit/" id,
success: function(data){
$('#addT').hide();
$('#addButton').hide();
$('#updateT').show();
$('#updateButton').show();
$('#id').val(data.id);
// $('#siniestro').val(data.siniestro);
// $('#fechaip').val(data.fechaip);
$('#inspector').val(data.inspector);
console.log(data);
}
})
}
// --------------------------------------------- Fin de editar registros a la table de BD -------------------------------------------------
// --------------------------------------------- Update de registros a la table de BD -----------------------------------------------------
function updateData(event){
event.preventDefault();
var id = $('#id').val();
// var siniestro = $('#siniestro').val();
// var fechaip = $('#fechaip').val();
var inspector = $('#inspector').val();
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
$.ajax({
type: "PUT",
dataType: "json",
data: {inspector:inspector},
url: "/teacher/update/" id,
success: function(response){
allData();
clearData();
console.log('Siniestro asignado con éxito');
}
})
}
</script>
@endsection
編輯 3
在此處輸入影像描述
看,之前向我展示屬性的捕獲僅來自 $users,現在使用 $data = Siniestro::orderBy('fechaip','ASC')->get();$users = User::all(); $combo = ['users' => $users, 'data' => $data];dd($combo); 如您所見,它向我顯示了所有用戶,但我看不到他們的“屬性”,很奇怪,對吧?會有問題嗎?
uj5u.com熱心網友回復:
所以當你這樣做時
$data = Siniestro::orderBy('fechaip','ASC')->get();
$users = User::all();
$combo = ['users' => $users, 'data' => $data];
return response()->json($combo);
然后,您應該檢查 javascript 中的傳入回應資料。現在資料由data和鍵控users。因此,在您allData()的 javascript 函式中,您必須根據鍵進行調整以顯示資料。
function allData(){
$.ajax({
type: "GET",
dataType: "json",
url: "/teacher/all",
success: function (response){
//Here console.log(response) to see the structure of incoming data
console.log(response)
// Should output something like
// {users: [... array of user records(objects)], data: [... array of siniestro records (objects)}
// So to generate the display markup you may have to do
$siniestroMarkup = "";
$.each(response.data, function(key, value){
siniestroMarkup = siniestroMarkup "<tr>"
siniestroMarkup = siniestroMarkup "<td>" value.id "</td>"
siniestroMarkup = siniestroMarkup "<td>" value.siniestro "</td>"
siniestroMarkup = siniestroMarkup "<td>" value.fechaip "</td>"
siniestroMarkup = siniestroMarkup "<td>" value.modalidad "</td>"
siniestroMarkup = siniestroMarkup "<td>" value.direccion "</td>"
siniestroMarkup = siniestroMarkup "<td>" value.localidad "</td>"
siniestroMarkup = siniestroMarkup "<td>" value.inspector "</td>"
siniestroMarkup = siniestroMarkup "<td>"
siniestroMarkup = siniestroMarkup "<td>"
siniestroMarkup = siniestroMarkup "<button class='btn btn-info btn-sm' onclick='editData(" value.id ")'>Asignar IP</button>"
siniestroMarkup = siniestroMarkup "</td>"
siniestroMarkup = siniestroMarkup "</tr>"
})
$('tbody').html(siniestroMarkup);
});
// Similarly you can access the user records
$.each(response.users, function(key, value) {
//Here value will represent each user record
});
}
如果您正在使用它,您可能還必須調整DataTableajax 回應,如下所示(檢查確切的回應資料結構以及如何訪問 DataTable)
$(document).ready(function() {
$('.tablita').DataTable({
"serverSide": true,
"ajax": "/teacher/all",
"columns": [
// {data: 'id'},
{data: 'data.siniestro'},
{data: 'data.fechaip'},
{data: 'data.modalidad'},
{data: 'data.direccion'},
{data: 'data.localidad'},
{data: 'data.inspector'},
{data: 'data.action', name: 'action', orderable: true, searchable: true},
],
});
})
檢查以上內容,看看這是否是您想要的資料。
uj5u.com熱心網友回復:
json 通常會始終發布一個陣列,您不能以這種方式發布單個物件。您需要將物件轉換為陣列并發布它。
$response_array['message'] = $data;
$response_array['data'] = $users;
return response()->json($response_array);
或者
$data = ['users' => $users, 'content' => $contents]; 回傳回應()->json($資料);
您可以使用以下方式接收這些資料:
success: function(response) {
console.log(response.content);
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/483380.html
下一篇:如何檢查文本變數是否等于陣列
