Datatable içinde sortable kullanımı ? | Cevap #11134

datatable içine verileri json olarak alıyorum
fakat bir türlü id değerine ulaşamadım.
bu konuda yardımcı olabilirmisiniz.?

var o = $("#anasayfa-list").DataTable({
	processing: true,
	serverSide: true,  
	serverMethod: 'POST',
	ajax: { 
		url: "/SayfaData/", 
	},  
	columns: [ 
        {data: 'id'}
	],
    rowReorder: {
		dataSrc: 'id',
		selector: 'tr'
	}, 
});
	-----------
$( "#anasayfa-list > tbody" ).sortable({
	delay: 150,
	stop: function() {
		var datav = new Array();
		$('#anasayfa-list > tbody').each(function() {
			datav.push($(this).attr("TRID"));
		});
		console.log(datav);
		alert(datav);
		update(datav);
	}
});

function update(data) {
	$.ajax({
		url:"/Sortable/",
		type:'post',
		data:{sira:data},
		success:function(){
			alert('güncel');
		}
	})
}

<div class="table-responsive">
    <table id="anasayfa-list" class="table table-striped table-bordered display" style="width: 100%">
        <thead>
            <tr id="TRID" class="btn-info">
                <th class="noshort" title="Tümünü Seç">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkall"/>
                        <label class="form-check-label" for="checkall"></label>
                    </div>  
                </th>   
                <th>id</th> 
            </tr>
        </thead> 
    </table> 
</div>

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 :)