phpajax加载结果和分页排序

mmvthczy 于 2021-06-21 发布在 Mysql

关注(0)|答案(3)|浏览(247)

我有一个工作脚本，通过ajax自动加载和分页结果来获取成员列表。
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>

现在，我需要将-sorting by-选项添加到同一代码中：

<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内部呢？

mysql php ajax pdo

来源：https://stackoverflow.com/questions/50130550/php-ajax-loading-result-and-pagination-with-sorting

3条答案

按热度按时间

oiopk7p51#

您可以在ajaxurl上传递sortby，例如$（“#results”）.load（“get#result.php？sortby=name”）并在服务器端获取该参数

赞(0）回复(0）举报 2021-06-21

xurqigkl2#

$(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);
    });
});

代码尚未测试

赞(0）回复(0）举报 2021-06-21

8aqjt8rx3#

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

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

它有很多内置的功能，你可以很容易地玩它。

赞(0）回复(0）举报 2021-06-21

我来回答

phpajax加载结果和分页排序

3条答案

相关问题

热门标签

最新问答