Livewire复选框，用于选择分页页面的上一页上的项

Question

请帮忙，我目前正在做这个livewire项目。该页面使用复选框进行分页。当我选中下一页上的复选框时，它会重新加载第一页上的数据，并选择该行中相同编号的另一项。因此，如果尝试在第二页上选择第3行的复选框，数据将刷新以显示前一页的项目，并选择第3行的复选框我实在想不明白，谁来帮帮我。

下面是我的代码

{
$tracking_dates = Tracking::select(DB::raw('max(created_at) as created_at'))
->groupBy('tracking_number')
->get();
$this->trackings = Tracking::query()
->when(Auth::user()->hasRole('user'), function($query){
$query->whereHas('PurchaseRequest', function($sub_query) {
$sub_query->where('user_id', '=', Auth::id());
});
})
->whereIn('created_at', $tracking_dates)
->paginate(20);
return view('livewire.index-tracker', [
'trackings' => $this->trackings,
'trackingStatus' => TrackingStatus::all(),
]);
}

我的视图代码

<form>
<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
@role('superadministrator')
<th>Multiple Action Select</th>
@endrole
<th>Item(s) Type</th>
<th>Tracking Number</th>
<th>Tracking Status</th>
<th>Invoice</th>
<th>Action</th>
</tr>
</thead>

<tbody>
@if(count($trackings) > 0)
@foreach($trackings as $key=>$tracking)
<tr>
@role('superadministrator')
<td>
{{$tracking->id}}
<input type="checkbox" value="{{$tracking->id}}" wire:model="selected">
</td>
@endrole
<td>
{{$tracking->purchase_request_id != "" ? "Purchase Request" : NULL}}
{{$tracking->shipment_id != "" ? "Shipment" : NULL}}
</td>
<td>{{$tracking->tracking_number}}</td>
<td>{{$tracking->TrackingStatus->name}}</td>
<td>
<a href="{{route('purchase_request.show',$tracking->PurchaseRequest->invoice_no)}}"><i class="mdi mdi-eye font-18"></i></a>
</td>
<td>
<a href="{{route('tracking.show', $tracking->tracking_number)}}" class="m-r-15 text-muted" data-toggle="tooltip" data-placement="top" title="View Tracking Detail" data-original-title="View Tracking Invoice"><i class="mdi mdi-eye font-18"></i></a>
{{--                                        @role('superadministrator')--}}
<a href="{{route('tracking.edit', $tracking->tracking_number)}}" class="m-r-15 text-muted" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"><i class="mdi mdi-pencil font-18"></i></a>
{{--                                        @endrole--}}
</td>
</tr>
@endforeach
@else
<tr>
<td colspan="5">No data available</td>
</tr>
@endif
</tbody>
</table>
@role('superadministrator')
<div class="form-group row">
<button wire:click.prevent="store()" class="btn btn-primary btn-md">Track</button>
</div>
</form>
@if(count($trackings) > 0)
{{ $trackings->links() }}
@endif``` 

Answer 1

您可以调用javascript page.dt()事件并将您已检查的所有id存储到本地存储中。请参考下面的代码。

var checkedData = [];
$('#tableID').on( 'page.dt', function () {
let allIds = localStorage.getItem("row-data-ids").split(",");
$('.checkboxes:checkbox:checked').each(function(index, rowId){
if($.inArray( $(this).val(),  allIds) ==  -1){
checkedData.push($(this).val());
}
});
localStorage.setItem('row-data-ids', checkedData);
} );

您还可以将本地存储值存储到隐藏变量中以进入POST请求。