PHP ve JQuery Sürükle Bırak ile Sıralama

Icerik-Tablo

[ad_1]

PHP ve JQuery Sürükle Bırak ile Sıralama


Ürünlerimizin, yazdığımız yazılarımızın bizim tercihimize göre sıralanması bazen ihtiyaç olabiliyor.

Bu işlemin nasıl yapılacağına dair örnekli olarak aşağıda açıklamaya çalışacağım.

JQuery kütüphanesindeki sortable fonksiyonunuyla Ajax methoduyla PHP sayfamızda sıralama işlemi yapacağız.

Örnek konumuz olarak e-ticaret sitelerindeki “Sık Sorulan Sorular” kısmını yapıyor olacağız.

Yazıma veritabanımızın örneğiyle başlamak istiyorum.

Icerik-Tablo
Basit haliyle listeleme sayfamızın ve Jquery ile sıralama işleminin kodlaması



<?php
include('db.php'); // Veritabanı bağlantısı

$query = 'SELECT * FROM icerik WHERE icerikDurum = "0" ORDER BY icerikSira';
$result = mysql_query($query);

$toplamKayit = mysql_num_rows($result);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>İçerik Listesi</title>
<script src="js/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</head>
<body>

<table width="100%" border="1" cellspacing="0" cellpadding="0">
	<tr>
		<th width="13">#</th>
		<th>İçerik Adı</th>
	</tr>
	<tbody id="sortable">
		<?php if ( $toplamKayit ){ $sayac = 0;?>
			<?php while( $value = mysql_fetch_assoc($result) ){ $sayac++;?>
				<tr id="item-<?php echo $value['icerikID']?>">
					<td class="sortable">
						<?php echo $sayac;?>
					</td>
					<td>
						<h3>
							<?php echo $value['icerikAdi'];?>
						</h3>
					</td>
				</tr>
			<?php }?>
		<?php } else {?>
			<tr>
				<td colspan="6">Listelenecek içerik bulunmamaktadır.</td>
			</tr>
		<?php }?>
	</tbody>
</table>

<style type="text/css">
	.sortable { cursor: move; }
</style>
<script type="text/javascript">
$(function() {
	$( "#sortable" ).sortable({
		revert: true,
		handle: ".sortable",
		stop: function (event, ui) {
			var data = $(this).sortable('serialize');

			$.ajax({
				type: "POST",
				dataType: "json",
				data: data,
				url: "ajax.php?p=urunSirala",
				success: function(msg){
					alert( msg.islemMsj );
				}
			});
		}
	});
	$( "#sortable" ).disableSelection();
});
</script>

</body>
</html>


Güncelleme işlemini yaptığımız ajax.php dosyamızın kodları



<?php
include('db.php'); // Veritabanı bağlantısı

if ( isset($_GET['p']) ){
	if ( $_GET['p'] == 'urunSirala' ){
		if ( is_array($_POST['item']) ){
			foreach ( $_POST['item'] as $key => $value ){
				$query = 'UPDATE icerik SET icerikSira = "'.$key.'" WHERE icerikID = "'.$value.'"';
				mysql_query($query);
			}
			$returnMsg = array( 'islemSonuc' => true , 'islemMsj' => 'İçeriklerin sırala işlemi güncellendi' );
		} else {
			$returnMsg = array( 'islemSonuc' => false , 'islemMsj' => 'İçerik sıralama işleminde hata oluştu' );
		}
	}
}

if ( isset($returnMsg) ){
	echo json_encode($returnMsg);
}
?>


Yukarı yaptığımız basit haliyle listeleme yaptığımız içeriğin sıralanmasıydı. Kullanım amacına bağlı olarak istediğiniz şekilde ihtiyacınızı karşıyalabilirsiniz.

Uygulama Örnek Sayfası

Jquery Sortable Uygulamasını İndir

*İndirilebilir örnek dosyamızda sql ve php dosyaları mevcuttur.


PHP ve JQuery Sürükle Bırak ile Sıralama

[ad_2]

Daha Fazla JavaScript Eğitim Dersleri İçin Java Script Eğitim Kategorisini İnceleyiniz…
#PHP #JQuery #Sürükle #Bırak #ile #Sıralama

Van Web Tasarım

Sektörel Firma Rehberi

Sektörel Nakliyat Firmaları Rehberi

Van Son Dakika Haberleri

İlk yorum yapan olun

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.


*