Datatable içinde sortable kullanımı ?
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>
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (13)
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]);
}
@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.
@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.
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 :)
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();
});
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.
@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
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.
$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.
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?