PHP AJAX загрузки результатов и разбиение на страницы с сортировкой

Question

У меня есть этот рабочий скрипт для получения списка участников с помощью автоматической загрузки 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> 

Теперь мне нужно добавить опцию сортировки по тому же коду:

<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 -low:) - с приведенным ниже кодом, и он работает нормально (Результат и разбиение на страницы) по умолчанию без сортировки.

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

Итак, как я могу передать / вызвать значение sortBy внутри ajax?

Answer 1

Существует очень мощный плагин jquery под названием Datatable для достижения требуемой функциональности. Посетите ссылку Просто вам нужно захватить свой идентификатор таблицы и вызвать функцию Datatable, т. Е.

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

Он имеет множество встроенных функций, с которыми вы можете легко играть.

Answer 2

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

Код не был проверен

Answer 3

вы можете передать sortby по URL-адресу ajax, например, $ ("# results"). Load ("get_result.php? Sortby = name") и принять этот параметр на стороне вашего сервера