2014-02-14 5 views
0

Добрый вечер все,Paginating AJAX JSON возвращенные данные

Просто после того, как некоторые указатели действительно разбивают на страницы json закодированные данные.

Я смотрел на некоторые другие страницы в stackoverflow и по какой-то причине, похоже, не мог обернуть мою голову тем, что можно перерисовать возвращаемые данные json.

Я имел взгляд на следующих страницах: How to use jQuery to paginate JSON data?, PHP/JSON-jquery pagination и http://www.9lessons.info/2010/10/pagination-with-jquery-php-ajax-and.html

У меня есть следующие страницы:

fia.php (скрипт базы данных)

<?php 

include('constants.inc.php'); 

$result=mysql_query("SELECT id, firstname, lastname FROM ".PERSON." ORDER BY lastname ASC, firstname ASC LIMIT 0, 30"); 
$num=mysql_numrows($result); 

$data = array(); 

while ($row = mysql_fetch_row($result)) 
{ 
    $data[] = $row; 
} 

echo json_encode($data); 
?> 

fi.php (для отображения результатов)

<?php 
include('header.php'); 
?> 
<script> 
$(document).ready(function() 
{ 
function loadit() 
{ 
    $.ajax(
    { 
     url: "fia.php", 
     data: "", 
     dataType: "json", 
     success: function(d) 
     { 
      for (var i in d) 
      { 
       var r = d[i]; 

       var id = r[0]; 
       var fname = r[1]; 
       var lname = r[2]; 
       $('#stuff').append('<br/><b>ID</b> '+id+'<br/><b>Name</b> '+fname+' '+lname+''); 
      } 
     } 
    }); 
} 
loadit(); 
}); 
</script> 
<div id="stuff">Stuff goes here</div> 
<?php 
include('footer.php'); 
?> 

Я просто не могу обернуть голову вокруг передачи переменных страницы скрипту php через вызов ajax. Я просто передаю переменную страницы через данные? Если да, то как я могу получить пагинацию показать под возвращаемые результаты - просто ищет некоторые указатели о том, как он может быть сделано

Если я использую исключительно PHP, я могу постраничной его и ранжировать это просто отлично и она будет переключать страницы, как я двигаюсь вперед или назад

Спасибо заранее (извинения, если этот вопрос кажется очень тупыми)

ответ

1

Если вы можете управлять пагинацией в только PHP, это не должно быть трудно сделать это с помощью ajax:

  1. Вам необходимо отправить номер страницы (и, при желании, количество элементов на страницу) в ваш php-скрипт, поэтому ваша строка data станет чем-то вроде: data: {pageNum: XX},
  2. В вашем php-скрипте вы должны использовать $_GET('pageNum') и количество предметов на странице, чтобы установить правильные параметры для предложения LIMIT.
  3. В вашем php-скрипте также необходимо получить общее количество элементов, чтобы вы могли отправить это число и элементы данных обратно в функцию успеха вашего вызова ajax.
  4. В функции успеха вашего вызова ajax вы создаете свой контент и разбивку на страницы, используя javascript, как в php, с данными, возвращаемыми в d.
  5. Вы должны изменить вашу loadit функции, чтобы она принимает параметр - номер страницы - и добавить обработчик событий, чтобы поймать все клики на страничных ссылках и передать их в вашу loadit() функции
1

Один из основные преимущества AJAX в том, что вы можете загружать изменения на страницу без отправки запроса на совершенно новую страницу. При использовании AJAX понимайте, что JavaScript будет выполнять все запросы «на лету», а PHP предоставит данные для запросов JavaScript. В вашем случае я бы рекомендовал использовать параметр запроса или что-то, чтобы сигнализировать PHP о том, какие данные он должен произвести. Например, вы можете захотеть использовать переменную $ _GET ['startFrom'], чтобы проверить, следует ли загружать данные из начального смещения. Затем запрос MySQL будет извлекать данные, и PHP выведет JSON для указанных данных.Когда пользователь нажимает на кнопку «Далее» на странице, вы можете вызвать функцию следующим образом:

function clickedNext() { 
    startingFrom += 30; 
    $.ajax('fia.php', { 
     data: { 
      startingFrom: startingFrom 
     }, ... 
    }); 
} 
1

Вот общая идея (без проверки ошибок и т.д., но это должно вам начать) В PHP файл

$page = $_POST['page']; // Numbers 1 - whatever 
$limit = 30; // you could also have this be a parameter passed to the script 
$offset = ($page -1) * $limit; 


$slimit = " LIMIT ".$limit . " OFFSET ". $offset; 
$sQuery = "SELECT id, firstname, lastname FROM ".PERSON." ORDER BY lastname ASC, firstname ASC" .$limit; 

В JavaScript

$(document).ready(function() 
{ 
    var page = 0; 
function loadit() 
{ 
    $.ajax(
    { 
     url: "fia.php", 
     data: {page: page}, 
     type: 'post', 
     dataType: "json", 
     success: function(d) 
     { 
      for (var i in d) 
      { 
       var r = d[i]; 

       var id = r[0]; 
       var fname = r[1]; 
       var lname = r[2]; 
       $('#stuff').append('<br/><b>ID</b> '+id+'<br/><b>Name</b> '+fname+' '+lname+''); 
      } 
     } 
    }); 
} 
loadit(); 

nextpage = function() { 
    page++; 
    loadit(); 
} 
prevpage = function() { 
    page--; 
    loadit(); 
} 
}); 
Смежные вопросы