v2.5.2
Giriş yap

Datatable içinde sortable kullanımı ?

acemi
467 defa görüntülendi

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>  
Cevap yaz
Cevaplar (13)
abdullahx
806 gün önce

Keşke çalışsaydı benim yöntemle o kadar umutlu idim :) ekstra sortable a gerek kalmayacaktı. Aslında bütün data elimde olsa yaparım da siz nasıl istiyorsanız öyle yapın :)
Şimdi hatırladığım kadarıyla $(row).attr('id', 'data-'+dataid); burada data-id şeklinde verilmesinin sebebi sortable ın data- dan sonraki id kısmını otomatik olarak yakalaması idi. Ona göre mevcut sırasını anahtar => değer şeklinde sunucuya gönderiyordu.
Benim yaptığım mantık hepsini döngüye sokma şeklinde idi


foreach($_POST as $k => $v) {
    $update = $db->prepare("UPDATE table SET order = ? WHERE id = ?");
    $update->execute([$k, $v]);
}

acemi
806 gün önce

@abdullahx

ben yaptım bi bakim adam cvp yazmıştır dedim sen yazmışsn :D

                        $response = []; 
                        $position = $_POST['data'];
                        $i = 1;
                        foreach($position as $key=>$value){ 
                            $sql = "UPDATE modul_anasayfa SET sira = :sira WHERE id = :id";
                            $stmt = $db->prepare($sql);
                            $stmt->bindParam(':sira', $i, PDO::PARAM_INT);
                            $stmt->bindParam(':id', $value, PDO::PARAM_INT);
                            $stmt->execute();
                            $i++;
                            if($stmt){
                                $response["Status"] = "ok";
                                $response["text"] = "tamam"; 
                            }else{
                                $response["Status"] = "error";
                                $response["text"] = "hata"; 
                            }
                        }

                        echo json_encode($response);

bunlarıda buraya eklimde belki birine lazım olur işini görürler.

dostum sanada alakan dolayı tekrar teşekkür ederim.

acemi
806 gün önce

@abdullahx

malesef bende çalışmadı gerekli değişiklikleri yaptığım halde

ben bu şekilde yaptım


var o = $("#anasayfa-list").DataTable({
	processing: true,
	serverSide: true,   
	ajax: { 
		url: "/SayfaData/", 
		data: function(d){         
			var kategoriSec = $('#kategoriSira').val(); 
			d.kategoriSira = kategoriSec; 
			var KatSec = $('#KatSira').val(); 
			d.KatSira = KatSec;  
		}
	},  
	columns: [
        {data: 'sil'},
        {data: 'id'},
        {data: 'modul_adi',orderable: true},
        {data: 'dosyaadi',orderable: true},  
        {data: 'sira',orderable: true},   
        {data: 'durum',orderable: true},
        {data: 'islem', responsivePriority: -1, orderable: false}
	],
	language:{url:"//cdn.datatables.net/plug-ins/1.10.12/i18n/Turkish.json"}, 
	columnDefs: [ 
        {  "className": "sec", targets: [ 1,2 ] },
		{
			targets: ['noshort'],
			orderable: false
		},
		{
			targets: -1,
			title: 'İşlemler',
			render: function(data, type, row) { 
				var html = '';
					$.each(row.action, function(key, action){
						if(action.duzenle.duzendurum === "true"){
							html+= action.duzenle.link;
 						}
						if(action.silme.sil === "true"){
							html+= action.silme.link;
						} 
						if(action.copeat.durum === "true"){
							html+= action.copeat.link;
						} 
					})
					return html; 
			},
		}, 
	],
	order: [[3, "asc"]], 
	displayLength: 10,
	lengthMenu: [
		[5, 10, 15, 20, 50, 100, 2],
		['5 Adet' , '10 Adet' , '15 Adet' , '20 Adet', '50 Adet', '100 Adet', 'Tümü']
	],
	dom: 'Blrtip',
	buttons: [ 
			{extend:'copy'},{extend:'csv'},{extend:'excel'},{extend:'pdf'},{extend:'print'}, 
	], 
    rowReorder: {
		dataSrc: 'id',
		selector: 'tr'
	}, 
	rowCallback: function (row, data) { 
		var dataid = data.id;    
		$(row).attr('id', 'data-'+dataid);
 
    }, 

});	

$(function() {
	$("#sortable").sortable({ 
		revert: true,
		cursor: 'move',
		handle: ".sec",
		stop: function(event, ui){
			var data = $(this).sortable('serialize');
			console.log(data);
			$.ajax({
				type: "POST",
				dataType: "json",
				data: data,
				url:"/SortUpdate/HomePage/",
				success: function(response){
					if(response.Status == "ok"){ 
					}
					if(response.Status == "error"){ 
					}
				}				
			});
		}
	});
	$("#sortable").disableSelection(); 
});

verileride bu şekilde alıyorum.

Array
(
    [item] => Array
        (
            [0] => 10
            [1] => 7
            [2] => 13
            [3] => 4
            [4] => 8
            [5] => 14
            [6] => 6
            [7] => 5
            [8] => 15
            [9] => 3
        ) 
)
// data[]=7&data[]=13&data[]=4&data[]=10&data[]=8&data[]=14&data[]=6&data[]=5&data[]=15&data[]=3

burda kafamın almadığı yer ise sıralama değişiyor veriler de ona göre geliyor bunu php tarafında nasıl harmanlayacağım.

acemi
806 gün önce

@abdullahx evdeki pc ye geçince deneyeceğim gelen vereiyi bir göreyim de ona göre bakalım işlemesini yaparım diye düşünüyorum
şimdiden teşekkür ederim.

abdullahx
807 gün önce

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

acemi
807 gün önce

bende id leri felan almayı felan hallettim
php tarafında nasıl bişi yapacağımı düşünüyordum.

bu şekilde tr lere idleri aktardım o sayfadaki id leri de komple aldım da bakalaım seninki nasıl.

rowCallback: function (row, data) { 
	var dataid = data.id;    
	$(row).attr('id', 'data-'+dataid);

},

$("#sortable").sortable({ 
	revert: true,
	cursor: 'move',
	handle: ".sec",
	stop: function(event, ui){
		var data = $(this).sortable('serialize');
		console.log(data);
		$.ajax({
			type: "POST",
			dataType: "json",
			data: data,
			url:"/SayfaData/",
			success: function(response){
				if(response.Status == "ok"){ 
				}
				if(response.Status == "error"){ 
				}
			}				
		});
	}
});
$("#sortable").disableSelection(); 

});

abdullahx
807 gün önce

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.

acemi
808 gün önce

@abdullahx

saolasın böyle id noyu aldım da bu sefer direk sürekli haliyle post ediyor

function updateOrder(data) { 
		$("#anasayfa-list ").click(function (e) {
			e.preventDefault();
			$.ajax({
				url:"/SayfaData/",
				type:'post',
				data:{sira:data},
				success:function(){ 
					$('#anasayfa-list').DataTable().ajax.reload();  
				}
			})
		}) 

		} 

böyle yapınca da çalışmıyor

$("table tbody ") çalışmadı
	$("table tbody tr ")
		$("#anasayfa-list > tbody > #id")
		
		teşekkür ederim buraya kadar ilgilendiğin için bnu arada
abdullahx
808 gün önce

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)
    },
});
acemi
808 gün önce

son sürüm 1.12
benim kullandığım 1.10
yani o kadarda eski bir sürüm kullandığım söylenemez.

verileri jsondan çektiği için
ordan gelen id verisine bir türlü erişemiyorum o veriye erişebilsem bütün sorunları çözeceğimde :)

abdullahx
808 gün önce

Şö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.

acemi
808 gün önce
 
$data = array();  
	while ($row = $Stmt->fetch(2)) {   
    $data[] = array( 
			"id"			    =>	$row["id"],  
    	);
}  
$response = array(
    "draw" => intval($draw),
    "iTotalRecords" => $totalRecords,
    "iTotalDisplayRecords" => $totalRecordwithFilter,
    "aaData" => $data
);

echo json_encode($response);

bu şekilde alıyorum verileri.

abdullahx
808 gün önce

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?