Web → Сортування даних таблиці без перезавантаження сторінки

Коли я влаштовувався на теперішню роботу, мені «в нагрузку» доручили облік мобільних телефонів, SIM -ок, в майбутньому КПК -шок за працівниками. Деякий час я вів все це діло в ексельних табличках, але потім там почався бардак і я написав невеличку програмку обліку ТМЦ за працівниками (Apache + PHP + MySQL).

За рік багато чого змінилося, вчора я взявся переписувати своє давнє творіння. Було вирішено змінити спосіб збереження даних в БД, заюзати транзакції, додати трошки аяксу (тільки там де це реально необхідно).

Ближче до суті

В бухгалтерських програмах (і взагалі в обліку) більшість даних виводиться таблицями, інстинктивно звична поведінка таблиць в локальному софті — вони сортуються по кліку на шапці

риклад сортування в Nautilus - GNOME

В попередньому варіанті, такого ефекту досягалось генерацією нового запита з передаванням номера поля по якому сортувати, перевантажувалася вся сторінка.

Уже обдумуючи як це краще реалізувати на аяксі, згадалась DOM модель і до мене дійшло :), ніяких запитів більше не потрібно! Всі дані які треба сортувати — уже завантажені. Звичайно ж не я перший до цього додумався і запитавши в гугла отримав цілу купу ссилок.

Код html:

 <table width="50%">
    <tr>
        <td onclick="sort(this)" title="Натисніть на заголовок, щоб відсортувати стовпчик">Номер</td>
        <td onclick="sort(this)" title="Натисніть на заголовок, щоб відсортувати стовпчик">Ім'я</td>
        <td onclick="sort(this)" title="Натисніть на заголовок, щоб відсортувати стовпчик">Фамілія</td>
        <td>Стать</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Козак</td>
        <td>Іван</td>
        <td>М</td>
    </tr>
    ... ... ...
</table>

Код JavaScript:

function sort(el) {
	var col_sort = el.innerHTML;
	var tr = el.parentNode;
	var table = tr.parentNode;  
	var td, arrow, col_sort_num;
 
	for (var i=0; (td = tr.getElementsByTagName("td").item(i)); i++) {
		if (td.innerHTML == col_sort) {
			col_sort_num = i;
			if (td.prevsort == "y"){
				arrow = td.firstChild;
				el.up = Number(!el.up);
			}else{
				td.prevsort = "y";
				arrow = td.insertBefore(document.createElement("span"),td.firstChild);
				el.up = 0;
			}
			arrow.innerHTML = el.up?"":"";
		}else{
			if (td.prevsort == "y"){
				td.prevsort = "n";
				if (td.firstChild) td.removeChild(td.firstChild);
			}
		}
	}
   
	var a = new Array();
   
	for(i=1; i < table.rows.length; i++) {
		a[i-1] = new Array();
		a[i-1][0]=table.rows[i].getElementsByTagName("td").item(col_sort_num).innerHTML;
		a[i-1][1]=table.rows[i];
	}
   
	a.sort();
	if(el.up) a.reverse();
   
	for(i=0; i < a.length; i++)
		table.appendChild(a[i][1]);
}

Думаю і так зрозуміло, що чим більша таблиця — тим більше навантаження на процесор буде давати сортування. Тому для великого об'єму даних, все ж краще застосовувати аякс реалізацію.

Хочу відмітити, що це один з простіших скріптів, по лінках гугла можна знайти більш функціональні і красиві варіанти, або ж допиляти самому.

За мотивами www.easywebscripts.net.

15.07.2009 01:03 Автор: Strange_V Хіти: 512

Напишіть відгук