Şu an bilgisayarda olmadığım için bakamayacağım ama size şu adreste hazırlamış olduğum basit sözlük uygulamasını verebilirim. Hem veri tabanı hem de tdk api ile uyumlu çalışıyor
Aslında ekstra sortable kullanmanıza gerek yok. reorder eklentisi ile birlikte gelen row-reorder
event ini dinleyerek sıralama işlemini gerçekleştirebilirsiniz. Şöyle ki;
id değerinin yanında ilk sütunda order yani sıra değerini vermeniz gerek. Bu değer yeniden sıralamada işimize yarayacak. Sunucudan aldığınız veri olacak büyük ihtimal, yeniden düzenledikten sonra yine sunuuya göndereceğiz
id yi alırken yapılan split işlemlerine gerek olmaması için $(row).attr('id', 'data-'+dataid);
kodunuzu doğrudan $(row).attr('id', dataid);
hatta $(row).attr('id', data.id);
diye değiştirirseniz daha kulalnışlı olur, split kullanmaya gerek kalmaz. Bu kısımları yapabileceğiniz biliyorum o yüzden sadece ufak bir öneri :)
$(function () {
let table = $('#example').DataTable( {
rowReorder: {
snapX: true,
dataSrc: 0 // Bunun değeri zaten varsayılan olarak 0, yani sıralama işlemi tetiklendikten sonra geri dönen değerin sütun index değeri 0 olunca ilk sütundaki değer, 3 olunca da 4. sütundaki değer döner. Yani tabloda sıra değerini kaçıncı sütuan koyduysan o olarak ayarla
},
columnDefs: [
{ orderable: true, className: 'reorder', targets: 0 },
{ orderable: false, targets: '_all' } // Diğer bütün sıralamaları kapatır. Sıralama tablosu için ideal bir seçenek
],
scrollY: '63vh', // Bu iki ayarı açarsan bence datatable üzerinde sıralama işin daha kolay olacaktır
paging: false, // Bu iki ayarı açarsan bence datatable üzerinde sıralama işin daha kolay olacaktır
scrollX: true,
scrollCollapse: true,
rowCallback: (row, data, index) => {
$(row).attr('id', `data-${data[0]}`); // Bu bendeki statik örnek için, sen burayı değiştir
}
})
table.on( 'row-reorder', function (e, diff, edit) {
let sendData = [];
for (let i=0, ien = diff.length ; i < ien ; i++) {
let orderData = {
id: +$(diff[i].node).attr("id").split('-')[1],
newOrder: +diff[i].newData, // dataSrc değerinin belirlediği hücre değeri (başında artı var,yani sayı olmasını bekliyoruz, string to integer için)
oldOrder: +diff[i].oldData // dataSrc değerinin belirlediği hücre değeri (başında artı var,yani sayı olmasını bekliyoruz, string to integer için)
}
sendData.push(orderData)
}
if (sendData.length) { // Eğer sıralamadan bir değişiklik yapıldıysa sunucuya gönder
$.ajax('ajax.php',{
data: {
reOrder: sendData
},
method: 'POST'
})
}
})
})
Sonra bu veriyi sunucu tarafında döngü ile döndürüp newOrder değerlerini sql sorgusunda WHERE olarak id kullanarak döngü içerisinde db ye kaydet.
Elinizde gerekli data olunca bunu işleyebileceğinize eminim. Kolay gelsin :)
Bugün tevafuk o ki bana da datatable içerisinde sıralama lazım oldu. Ve rowreorder eklentisini kullanınca az buçuk hâkim oldum.
Mantık olarak bir satırı (tr) yer değiştirince bütün satırlara ait spesifik bir değerin o anki sırasını alıp sunucuya göndermek üzere bir mantığı var. Bu mantık üzerine olması gerekiyor. Şu an mobildeyim. Birkaç saat sonra benim çalıştığım kodları paylaşacağım.
Siz de bunun haricinde bir şey eklemek isterseniz ekleyin.
Haklısınız aslında ama dokümanlarda örneğin serverMethod ayarına ulaşamadım bir türlü ondan kafam karıştı :) Neyse gereksiz uzattım sanırım, biraz çözüm odaklı olalım.
Şöyle bir şey deneyin bakalım konsolda nasıl bir çıktı verecek
var o = $("#anasayfa-list").DataTable({
processing: true,
serverSide: true,
serverMethod: 'POST',
ajax: {
url: "/SayfaData/",
},
columns: [
{data: 'id'}
],
rowReorder: {
dataSrc: 'id',
selector: 'tr'
},
rowCallback: function (row, data) {
console.log(data.id)
},
});
Şöyle bir kendi kullandığım DataTables kodları ile karşılaştırdım, internette de biraz araştırma yaptım. Anladığım kadarıyla eski sürüm bir datatables kullanıyorsunuz. Son sürüm datatables ile daha anlaşılır şekilde yapabilirsiniz. https://datatables.net/
İllaki çalışır da benim bilgi dahilim dışında parametreler içeriyor sizdeki kodlar.
Buradaki kilit nokta json dosyanızın veri yapısı. Server side yapılandırmasında gelecek cevabın içerisinde olması gereken yanıtlar data, recordsTotal ve recordsFiltered olmalı ki bunları zaten bildiğinizi düşünüyorum. İşleme tabi tuttuğunuz json dosyasından oluşan yanıtı array içerisinde data
anahtarına koymanız gerekiyor.
Datatables gerçekten çok fazla yöntem sunuyor ve hangisinin gerçekten işimize yarayacağını anlamak güç olabiliyor. Biraz daha açabilirseniz ve json dosyası yapınızı da gösterebilirseniz yardımcı olmaya çalışalım.
Ayrıca DataTable ın normal koşullardaserverMethod
diye bir ayarı yok, onu nasıl oraya yazdınız?
37 . satırdaki kodu silerseniz düzelecektir.
Bu seçme işlemini hangi aşamada gerçekleştirdiğine bağlı olarak değişebilmekle beraber şöyle bir nebze kısa yolu olabilir
$(testItem).find('.test-class3').text()