مرتب سازی سطرهای MySQL با Ajax

مرتب سازی سطرهای MySQL با Ajax از ارسال نام ستون و orderby در URL جلوگیری می کند. بنابراین, آدرس URL صفحه مورد نظر را ساده تر می کند.

در آخرین آموزش PHP , نحوه مرتب سازی سطرهای MySQL را توسط php با هر رفرش صفحه دیدیم.

هدر HTML به درخواست AJAX

این کد HTML شامل نتایج دیتابیس به همراه نم ستون ها در هدر جدول است. با کلیک بر روی این هدر, درخواست AJAX به سمت سرور برای دریافت نتایج جدیدتر بر اساس ترتیب سطر داده ارسال می شود.

<?php 
	if(!empty($result))	 { ?>
	<table class="table-content">
		<thead>
			<tr>
			  <th width="30%" onClick="orderColumn('post_title','<?php echo $postTitleNextOrder; ?>')"><span>Post Title</span></th>
			  <th width="50%" onClick="orderColumn('description','<?php echo $descriptionNextOrder; ?>')"><span>Description</span></th>          
			  <th width="20%" onClick="orderColumn('post_at','<?php echo $postAtNextOrder; ?>')"><span>Post Date</span></th>	  
			</tr>
		</thead>
		<tbody>
		<?php
			while($row = mysqli_fetch_array($result)) {
		?>
			<tr>
				<td><?php echo $row["post_title"]; ?></td>
				<td><?php echo $row["description"]; ?></td>
				<td><?php echo $row["post_at"]; ?></td>
			</tr>
		<?php
			}
		?>
		<tbody>
	</table>
<?php } ?>

<?php

if(!empty($result)) { ?>

<thead>

<tr>

<th width="30%" onClick="orderColumn('post_title','<?php echo $postTitleNextOrder; ?>')"><span>Post Title</span></th>

<th width="50%" onClick="orderColumn('description','<?php echo $descriptionNextOrder; ?>')"><span>Description</span></th>

</tr>

</thead>

<tbody>

<?php

while($row = mysqli_fetch_array($result)) {

<tr>

</tr>

<?php

}

<tbody>

</table>

<?php } ?>

تابع جی کوئری مرتب سازی سطرهای MySQL با Ajax

اسکریپت jQuery زیر یک درخواست AJAX را به فایل order_column.php برای پاس دادن مقدار column_name و order ارسال می کند.

کد PHP ایم درخواست AJAX را خوانده و پارامترهای POST رابرای دریافت نتایج براساس مرتب سازی جدید, دریافت میکند.

این نتایج به عنوان پاسخ اجکس برگشت داده می شود.

<script>
	function orderColumn(column_name,column_order) {
		$.ajax({
			url: "order-column.php",
			data:'orderby='+column_name+'&order='+column_order,
			type: "POST",
			success: function(data){	
				$('#demo-order-list').html(data);
			}
		});
	}
</script>