Есть, типа разработчиков, которые дико «ложат в штаны» при одной мысли что для решения определенных задач нужно использовать javascript и еще сильнее портят свои штаники, когда google не показывает ничего дельного по их проблеме.

Вот видимо после такого девелоХера мне и пришлось переделывать один проект.
Исходня задача была такой: есть на странице два списка — одном из них допустим хорошие пользователи, в другом все остальные. Как было реализовано: два блока заданной высоты и со скроллем: мотай себе скроль смотри и если захочешь пользователя из списка два перенести в список один, то достаточно просто кликнуть по нему. Все вроде работало, но не думал наш разработчик, что пользователей то может быть не 20-30, а 60 тысяч к примеру. Что получили в итоге: загрузка страниц по минуте минимум и падения таких «шустрых» браузеров как IE.

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

Как это все делалось. Код в принципе работющий, но я выкинул парочку не столь принципиальных для данного примера вещей:
HTML

<div id="recipientsUsersDataContainer">
<table id="recipientsUsersData">
<tbody>
</tbody>
</table>
</div>
<div id="recipientsUsersDataContainer"><table id="recipientsUsersData"><tbody></tbody></table></div>

CSS

#recipientsUsers{
overflow: auto;
height: 200px;
}

Javascript

//Функция запрашивает данные от сервера и добавляет их в таблицу
var nextPage = 1;
function ajaxGetAllUsers()
{
    $.ajax({
        type: 'POST',url:ВАШ УРЛ',dataType:'json',cache:false,data:{page: nextPage},success:function(data){
            $("#recipientsUsersData > tbody:last").append(data['html']);
            nextPage = data['next_page'];

        }
    });

}

$(document).ready(function(){

	var loadUsershandler = function (scrollData) {
		//если больше данных нет, то нам больше получать данные не нужно
		if(nextPage == null){
			$('#recipientsUsersDataContainer').unbind('scroll',loadUsershandler);
			return;
		}
	   	  var recepientsContainerTop = $('#recipientsUsersDataContainer').position().top;
	   	  var recepientsContainerTopHeight = $('#recipientsUsersDataContainer').height();
	   	  var lastTrPos = $('#recipientsUsersData > tbody > tr:last').position().top;
//высчитываем дошел ли пользователь до последней строки таблицы
	   	  if(lastTrPos > recepientsContainerTop && lastTrPos < (recepientsContainerTop+recepientsContainerTopHeight) ){
	   		ajaxGetAllUsers();
	   	  }

	    }
});

PHP

<?php
// получаем наши данные и формируем их в такую строку
// вместо многточия наши данные
$html = '<tr>.....</tr><tr>.....</tr><tr>.....</tr>';

if(/*Проверка есть ли еще данные*/){
//если данных больше нет, то и следующей страницы нет тоже
	$nextPage = null;
} else{
//если данных еще есть, то прибавляем еденицу к текущей странице
	$nextPage = $currentPage+1;
}
//формируем наши данные
$data = array('next_page' => $nextPage, 'html' => $html);
exit(json_encode($data));
?>

В принципе решилось все довольно-таки быстро и просто. Этот код не претендует на шедевр, так как делался скорее быстрее нежели красивее, хотя заметных косяков я не вижу.

Этот пример скорее для того, чтобы показать, что ajax не так страшен, как многие думают, да и javascript если разобраться, то очень даже милый язык. Хотя может банально не хватило опыта предыдущему разработчику предусмотреть вариант, что список может быть очень длинным.

Правда, половину его JavaScript кода я утащил себе, как шедевры ужасной реализации. Например, формируется не только таблица со всеми пользователями сразу, а еще и дополнительно массив в js для переноса данных между списками. Но сейчас не об этом, думаю боги программирования его накажут 🙂

Всем хороших выходных!

Ваш aravak