PHP ajax 加载结果和排序分页

Question

我有这个工作脚本来获取成员列表，通过 Ajax 自动加载和分页结果。

阿贾克斯：

$(document).ready(function() {
$("#results").load("get_result.php"); 
$("#results").on("click",".paginations a", function (e){
e.preventDefault();
var page = $(this).attr("data-page");
$("#results").load("get_result.php",{"page":page}, function(){ 
});
});
});

输出：

<div class="col-md-2">
<h1>Name</h1>
<p>Age</p>
<p>City</p>
<p>ID</p>
</div> 

现在，我需要在相同的代码中添加 - 排序依据 - 选项：

<ul>
<li><button onclick="sortby(age)">Age</button></li>
<li><button onclick="sortby(name)">Name</button></li>
<li><button onclick="sortby(city)">City</button></li>
.....
</ul>

我尝试了我的 AJAX 知识 - 低:)- 使用以下代码及其工作正常(结果和分页(作为默认值，没有排序。

$(document).ready(function() {
var sortby="";
$("#results").load("get_result.php",{"sortby":sortby}); 
$("#results").on("click",".paginations a", function (e){
e.preventDefault();
var page=$(this).attr("data-page");
$("#results").load("get_result.php",{"sortby":sortby,"page":page}, function(){ 
});
});
});

PHP：-PHP 完全没有问题。

if(isset($_POST)){
if ($_POST['sortby']){
$sql=$db->query("SELECT * FROM members WHERE city=? ORDER BY city DESC");
............
} else {
$sql=$db->query("SELECT * FROM members ORDER by id");
............
}
}

那么，我如何将排序按值传递/调用到ajax内部？

Answer 1

你可以在 ajax url 上传递 sortby，例如 $("#results"(.load("get_result.php？sortby=name"( 并在服务器端使用该参数

Answer 2

有一个非常强大的jquery插件，名为Datatable来实现所需的功能。 访问链接 只需获取表ID并调用数据表函数即可

$('#yourTable').DataTable("order": [[ 1, "asc" ]]); // Where 1 is you column number by which you want to sort. 

它具有许多内置功能，您可以非常轻松地使用它。

Answer 3

$(function(){
var results = $("#results");
var page = 1;
function ajaxLoad(resultHtml){
var resultObj = $(resultHtml);
results.empty().append(resultObj);
var paginations = resultObj.find('.paginations a');
paginations.click(function(e){
page = $(this).attr("data-page");
$.post('get_result.php',{"page":page},function(resultHtml){
ajaxLoad(resultHtml);
});
return false;
});
/* Different way 
*  <li><button onclick="sortby(age)">Age</button></li>... change to 
*   <li><button class="sortby" data-sortby="age">Age</button></li>
*
var sortbyObj = resultObj.find('.sortby');
sortbyObj.click(function(){
var dataSortby =$(this).attr("data-sortby");
$.post('get_result.php',{"page":page, sortby:dataSortby},function(resultHtml){
ajaxLoad(resultHtml);
});
});
*/
}
function sortby(val){
$.post('get_result.php',{"page":page, "sortby":val},function(resultHtml){
ajaxLoad(resultHtml);
});
}
$.post('get_result.php',{"page": page},function(resultHtml){
ajaxLoad(resultHtml);
});
});

代码尚未测试