Herkese merhaba, benim için kocaman, bilen için küçük bir sorunla karşı karşıyayım.
Acemi olduğumu unutmadan her türlü eksik gedik fazla tavsiyenize hazırım, ama gerçek sorunum aşağıda.
Bard ve ChatGPT bazı yollar sundu, Fakat pratikte çalıştıramadım.
Bu önsözden sonra uzun bir kod paylaşmaya başlıyorum.
Şimdiden vakti olanlara teşekkürler.
- Kullanıcının tek tek satırları seçebileceği,
- isterse toplu olarak seçip, toplu olarak silip, yine
deselect yapabileceği bir tablom var.
- Tablomda seçim başlayınca
deselect butonu show oluyor.
- Ayrıca
Seçimleri Sil diye isimlendirdiğim buttonumun yanında seçilen satır sayısı yazıyor.
- Yine kulllanıcı; satırların işlemler sutunu hariç, nereye isterse tıklıyor ve
select yada deselect işlemi gerçekleşiyor.
- İstediğim işlemlerinin tümünü Datatables eklentisi içinde yapmayı beceremediğimden eklentinin sadece
search butonunu kullanıyorum.
- Son olarak; tablomdaki No sutunundaki satır numaraları paginate olan her sayfada sıfırlanıyordu, bu yüzden küçük bir js yazdım.
Her şey aşağıda mevcut.
Sorun=> Sayfa değiştirdiğimde JS kodlarım resetleniyor.
Açıklama=> Laravel 10'da Paginate fonksiyonu ile linklediğim index view şablomdaki verilerde;
- İlk sayfada silmek istediklerimi seçiyorum,
- Sil işlemi yapmadan diğer sayfaya geçip yine silmek istediklerimi seçmek istiyorum,
- Sayfa değiştirdiğim zaman seçim işleminin üstüne devam etmesi gereken js kodlarım,
- Yeni bir hayata başlıyorlar ve her şey sıfırlanıyor. Belkide anlatabildim.(Kendi açımdan söylüyorum 😃)
Html kodları
<div class="card-body">
<table class="table table-bordered table-hover" id="example">
<thead>
<tr>
<th><input type="checkbox" name="" id="select_all_ids"></th>
<th>No</th>
<th>Şarkı</th>
<th>Album</th>
<th>Sanatçı</th>
<th>İşlemler</th>
<th class="d-lg-none">Engine version</th>
<th class="d-lg-none">CSS grade</th>
</tr>
</thead>
<tbody>
@foreach ($songs as $song)
<tr class="align-text-bottom table-row" id="song_ids{{ $song->id }}">
<td></td>
<td><input type="checkbox" name="ids" class="checkbox_ids" id=""
value="{{ $song->id }}"></td>
<td>{{ $song->name }}</td>
@if ($song->albums->isNotEmpty())
@foreach ($song->albums as $album)
<td>{{ $album->name }}</td>
@endforeach
@else
<td class="text-danger">Album yok</td>
@endif
@if ($song->artists->isNotEmpty())
@foreach ($song->artists as $artist)
<td>{{ $artist->name }}</td>
@endforeach
@else
<td class="text-danger">Sanatçı yok</td>
@endif
<td>
<form action="{{ route('song.destroy', $song->id) }}" method="POST">
<a title="Düzenle" class="btn btn-primary edit-button"
href="{{ route('song.edit', $song->id) }}"><i class="fa fa-pen"></i></a>
@csrf
@method('DELETE')
<button title="Sil" type="submit" class="btn btn-danger delete-button"
onclick="return confirm('Şarkı kaydını silmek istediğinize emin misiniz?')"><i
class="fa fa-times"></i></button>
</form>
</td>
<td class="center d-lg-none">4</td>
<td class="center d-lg-none">X</td>
</tr>
@endforeach
</tbody>
</table>
{{ $songs->links() }}
</div>
JS kodlarım
@section('js')
<script>
$(document).ready(function() {
var currentPage = {{ request()->get('page') }};
var perPage = {{ $songs->perPage() }};
$('table tbody tr').each(function(index) {
$(this).find('td:first').text(index + 1 + (currentPage - 1) * perPage);
});
});
</script>
<script>
$(document).ready(function() {
$('#example').DataTable({
"paging": false, // Sayfalama özelliğini devre dışı bırak
"searching": true, // Sadece arama özelliğini kullan
});
});
</script>
<script>
$(function(e) {
$("#select_all_ids").click(function() {
$('.checkbox_ids').prop('checked', $(this).prop('checked'));
updateSelectedCount();
});
// Satır tıklama işleyicisini ekleyin
$('.table-row').click(function() {
var checkbox = $(this).find('.checkbox_ids');
// Checkbox'ın durumunu kontrol edin
if (!checkbox.prop('checked')) {
checkbox.prop('checked', true);
} else {
checkbox.prop('checked', false);
}
// Checkbox'ın durumunu güncelleyin
checkbox.trigger('change');
updateSelectedCount();
});
// Checkbox'a doğrudan tıklandığında da aynı işlevi gerçekleştirmek için:
$('.checkbox_ids').click(function() {
var checkbox = $(this);
// Checkbox'ın durumunu kontrol edin
if (!checkbox.prop('checked')) {
checkbox.prop('checked', true);
} else {
checkbox.prop('checked', false);
}
// Checkbox'ın durumunu güncelleyin
checkbox.trigger('change');
updateSelectedCount();
});
// Seçili onay kutularının sayısını güncelleyen fonksiyon
function updateSelectedCount() {
var selectedCount = $('input:checkbox[name=ids]:checked').length;
// "Seçilileri Sil" butonunun metnini güncelleyin
$('#deleteAllSelectedRecord').text('Seçilileri Sil (' + selectedCount + ')');
// "Seçimi Kaldır" butonunu görünür yapın veya gizleyin
if (selectedCount > 0) {
$('#deSelectedRecord').show();
} else {
$('#deSelectedRecord').hide();
}
}
// Tüm seçimleri kaldıran buton
$('#clearSelectedRecords').click(function(e) {
e.preventDefault();
// Tüm checkbox'ları unchecked yap
$('.checkbox_ids').prop('checked', false);
// Seçili onay kutularının sayısını güncelle
updateSelectedCount();
});
// Tüm seçimleri kaldıran buton tıklandığında da sayıyı güncelle
$('#deSelectedRecord').click(function(e) {
e.preventDefault();
// Tüm checkbox'ları unchecked yap
$('.checkbox_ids').prop('checked', false);
// Seçili onay kutularının sayısını güncelle
updateSelectedCount();
});
// Başlangıçta seçili onay kutularının sayısını güncelle
updateSelectedCount();
// Düğmelere tıklandığında satır seçimini engelleyen fonksiyon
$('.edit-button, .delete-button').click(function(event) {
event.stopPropagation();
});
// Seçili kayıtları silen fonksiyon
$('#deleteAllSelectedRecord').click(function(e) {
e.preventDefault();
var all_ids = [];
$('input:checkbox[name=ids]:checked').each(function() {
all_ids.push($(this).val());
});
if (all_ids.length > 0) {
if (confirm(
"Seçili " + all_ids.length +
" kaydı gerçekten silmek istiyor musunuz? Bu işlem geri alınamaz!")) {
$.ajax({
url: "{{ route('song.delete') }}",
type: "DELETE",
data: {
ids: all_ids,
_token: '{{ csrf_token() }}'
},
success: function(response) {
$.each(all_ids, function(key, val) {
$('#song_ids' + val).remove();
});
// Mesajı döngüden sonra gösterin
alert("Kayıtlar başarıyla silindi!");
updateSelectedCount();
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("AJAX isteği başarısız:", textStatus,
errorThrown);
alert("Kayıtlar silinirken bir hata oluştu!");
}
});
}
} else {
alert("Lütfen silmek istediğiniz kayıtları seçin!");
}
});
});
</script>
@endsection
İndex controller
public function index()
{
$songs = Song::paginate(10);
return view('backend.pages.song.index', compact('songs'));
}
deleteAll controller
public function deleteAll(Request $request)
{
$ids= $request->ids;
Song::whereIn('id',$ids)->delete();
// Başarı mesajı
session()->flash('success', 'Şarkı başarıyla silindi.');
return response()->json();
}
Rotam
Route::delete('/selected-song', [SongController::class, 'deleteAll'])->name('song.delete');
