Розробка · 12 січня 2011, 15:45 2560

lion69

обновление таблицы html через ajax

с пхп через limit я достаю первые 10 строк таблицы.
потом через пхп и хтмл создаю таблицу и вписываю туда даные из масива (через ехо)

внизу таблицы ссылки для навигации по таблице (1 2 3...).
при нажатии на одну из них аяксом я получаю новый масив даных. теперь мне нужно обновить таблицу.

как это лучше сделать? доставать айди каждой ячейки и менять ее значение? или удалить старую таблицу (я правда не знаю как) и нарисовать скриптом новую? или может еще есть способ?

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

👍ПодобаєтьсяСподобалось0

До обраногоВ обраному0

Facebook

Twitter

LinkedIn

Ctrl + Enter

Ctrl + Enter

lion69 13.01.2011 00:29

Коментар порушує правила спільноти і видалений модераторами.

lion69 13.01.2011 00:28

Коментар порушує правила спільноти і видалений модераторами.

Bogdan Shyiak SE or Dev 12.01.2011 17:40

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

Если теле не ложное то можно и сформировать строку хтмл, а потом добавить ее в таблицу, если сложное, то возмите что-то вроде EJS.

Если же я ошибся, и тбоди может быть только один, то прийдется хайдить/разхайжевать строки пачками.

Удалять потом создавать заново — я бы не советовал, менять значения в ячейках — будет тормозить и много мест где можно допустить ошибку.

Відповісти

Підтримати

lion69 12.01.2011 19:45

да может быть несколько тбоди... только я не понял что вы предлагаете мне с ними сделать?

Відповісти

Підтримати

Bogdan Shyiak SE or Dev 12.01.2011 19:53

Спрятали текущий тбоди
Если уже есть сформированный тбоди показали,
если нет получили с сервера данные для таблицы,
сформировали страницу на клиенте (тбоди) вставили ее в конец таблицы.

Учитывая ваши объемы, лучше формировать на клиенте, а не ганять хтмл с сервера.

Відповісти

Підтримати

Василий Палыч 12.01.2011 20:04

Т.е. вы действително считаете оптимальным при показе многостраничного списка для страницы из 10 записей возится с динамическим созданием таблицы на клиенте?

Или как понять — «учитывая ваши объемы»?

Відповісти

Підтримати

lion69 12.01.2011 20:17

у меня не 10 записей на странице... просто число 10 психологически легче восприниматся чем число 35, 40 или 50. оно меньше напрягает, но в то же время передает нужную информацию.

Відповісти

Підтримати

Bogdan Shyiak SE or Dev 12.01.2011 20:44

Если меньше чем 500, то я бы делал через ДжСОН, а не ганял хтмл

Відповісти

Підтримати

Bogdan Shyiak SE or Dev 12.01.2011 20:43

Если 1 раз правильно сделать контрол, то потом его можна переиспользовать;), а хтмл прийдется каждый раз генерить новый.

Кроме того размер отдаваемого ДжСОНа будет меньше чем размер готового хтмл и скорее всего потом еще прийдетсо бегать уже по вставленному ДОМу (но не факт), а так все манипуляции можно сделать с джаваскриптовыми объектами.

Відповісти

Підтримати

Василий Палыч 12.01.2011 20:50

Да все это замечательно, только, имхо, для простого постраничного просмотра слишком геморно.

Еще, кстати, хорошо бы помнить про SEO — если странички в паблике, то нада бы их показывать для поисковиков без js — и таки придется отдельно на сервере их формировать.

Відповісти

Підтримати

lion69 13.01.2011 00:06

тоесть если парсить json в джаваскрипте то поисковики смогут найти то что я распарсил?

Відповісти

Підтримати

Василий Палыч 13.01.2011 00:38

Коментар порушує правила спільноти і видалений модераторами.

Василий Палыч 13.01.2011 00:40

Коментар порушує правила спільноти і видалений модераторами.

Василий Палыч 13.01.2011 00:42

Коментар порушує правила спільноти і видалений модераторами.

Vitaliy Volkov 13.01.2011 01:52

Коментар порушує правила спільноти і видалений модераторами.

Василий Палыч 13.01.2011 09:12

Нет, как раз если парсить — то не смогут.

Обычно делают так, создают ссылку, типа

<a href="page.php?num=1″ onclick="loadPage(1); return false;">...</a>

На onclick в loadPage загружается аяксом страница. return false в данном случае предотвратит переход по ссылке page.php? num=1.
Если же страницу будет парсить поисковик — он пройдёт по ссылке — и должен будет там обнаружить тот же контент, который в первом случае загружается аяксом.

Поэтому удобно генерить отдельные страницы сразу на сервере для обоих случаев, чем в одном случае разбирать json на клиенте — в другом все равно генерить хтмл на сервере.

Відповісти

Підтримати

lion69 12.01.2011 20:13

<< сформировали страницу на клиенте (тбоди) вставили ее в конец таблицы.
как?

нарисовать скрипт, а потом Id_Of_TABLE.innerHtml = script?

<< Спрятали текущий тбоди,

а зачем их прятать? чтобы если юзер вернется на старую страницу не загружать данные наново? так?

Відповісти

Підтримати

Василий Палыч 12.01.2011 20:44

Ну, если уж принципиально динамически, то как то так:

document.getElementById (“tbody1”).style.display = ’none’;
var tbodyEl = document.createElement (“tbody”);
//тут dhtml-em заполнить строками tbodyEl
document.getElementById (“tbl”).appendChild (tbodyEl);,

но я все таки за вариант fastpars, даже с 50 записями

Відповісти

Підтримати

Bogdan Shyiak SE or Dev 12.01.2011 20:46

Повторюсь:

Не вставлять ДОМ-элементы, а сформировать хтмл и сунуть его в иннерХтмл или аппендом из какой-то либы

Відповісти

Підтримати

Bogdan Shyiak SE or Dev 12.01.2011 20:49

> чтобы если юзер вернется на старую страницу не загружать данные наново?

Да.

> Id_Of_TABLE.innerHtml = script

Да, только Id_Of_TABLE.innerHtml += script

А еще лучше посмотрите на jquery.com или на какой-то другой фреймворк.

Відповісти

Підтримати

lion69 12.01.2011 22:21

<< Спрятали текущий тбоди,

а какое максимальное число тбоди вы посоветуете хранить? или это не имеет значение?

Відповісти

Підтримати

Bogdan Shyiak SE or Dev 13.01.2011 09:11

Скорее всго не имеет, ибо далеко не факт что удаление куска ДОМа освободит память (хелло ИЕ)

Відповісти

Підтримати

A B 12.01.2011 17:00

Коментар порушує правила спільноти і видалений модераторами.

A B 12.01.2011 16:53

Выбери для себя js фрейворк (я пользуюсь jquery) < br> Не важно как, но ты должен отправлять номер страницы. Считуй через js фреймворк номер страницы и отправляй этот запрос на сервер.

<script> // Запихнуть в head
$(".gotopage a«).click (function () {$ (document).ready (function () {ver page_number = $ (this).html ();
$.post («get_page.php», {«page_id»:, «page_number»: page_number},
function (data) {$ («#content»).html (data);}, «html»);});});
</script>
<div id="content"></div>
<div class="gotopage">
</div>

Где page_number — номер запрашиваемой страницы номер текущей страницы (если нужно)

на странице get_page.php нужно принять две post переменные: $_POST [’page_id’] и $_POST [’page_number’]...

http://api.jquery.com/http://jquery.com/

Відповісти

Підтримати

lion69 12.01.2011 17:23

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

достать айди каждой ячейки и присвоить ей новое значение...?

Жквери я использовать не хочу... это мой первый сайт и хочу для учебы немного поизобретать велосипед.

Відповісти

Підтримати

Василий Палыч 12.01.2011 18:23

Да все правильно человек написал — получать с сервера надо уже данные в виде таблицы хтмл -, а потом заменять существующую на полученную (можно конечно и без jquery).
Учись сразу делать нормально.

Відповісти

Підтримати

A B 12.01.2011 19:42

Есть два пути получать json или уже готовый html. (и xml, но сейчас не про это)
Для замены содержание контейнера нужно использовать
$ (’jquery_selector’).html (’< table></table>...’);
или из примера выше

function (data){
//выведет возвращаемые данные
alert(data);

//перезапишит содержание контейнера с id="content"
$("#content").html (data);
}

Відповісти

Підтримати

lion69 12.01.2011 20:35

извиняюсь... не сразу код понял... да и сейчас некоторые моменты не понимаю

$.post («get_page.php»,

=> что вообще означает запись $.? и что вы тут делаете... это отправка аяксом на сервер(я просто не так делаю)?

$ (this).html ();

=> что делает это и зачем это =>

$(".gotopage a")

извиняюсь за детские вопросы..., но это первая неделя обучения...

Відповісти

Підтримати

A B 12.01.2011 21:19

$ — это пространство имён, алиас (сокращение) для jQuery.

т.е. можно переписать так: jQuery.post («get_page.php»,... jQuery (this).html ();...

Распишу $.post (по такому же принципу и все остальные jquery ajax):

//Делает запрос к скрипту на сервере — get_page.php
$.post («get_page.php»,...

// Добавляет данные к пост запросу
... { «func»: «getNameAndTime» }...

//колбэк функция. Выполняется как только ajax данные получены.
function(data){
...
},

// Тип получаемых данных от сервера
«json» или «html» или «xml»

Итого: получаем что-то типа

$.post("test.php«, { «func»: «getNameAndTime» },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, «json»);

this // это объект, та кнопка-ссылка по которой клацнули. Ключевая роль this в том что его можно использовать в селекторе jquery! 
//т.е.
$(".gotopage a«).click(function{
alert($(this).html());
});

Метод «.html()» , без параметров, возвращает содержание селектора. В данном случае номер страницы для отправки через $.post

api.jquery.com/html

И на конец

$(".gotopage a")

Это jQuery серектор. Делает выборку тегов в DOM дереве...

Приведу самых простых выборок:

//большинство селекторов практически идентичны с CSS селекторами.
$(".gotopage a") // все элементы a которые находятся в элементах с классом gotopage.
$(".gotopage") // все элементы с классом gotopage.
$("#gotopage") // один элемент с id = gotopage
...
$("*") // вообще все элементы

Это былы самые простые из базовых. А тут все что есть:

api.jquery.com/...gory/selectors

Ajax методы от jquery

api.jquery.com/...rthand-methods

З.Ы. Снова хз что получится без предпросмотра

Відповісти

Підтримати

lion69 12.01.2011 22:13

спасибо большое

Відповісти

Підтримати

Vitaliy Volkov 12.01.2011 17:49

Я взял на себя смелость и наглость немного подредактировать комментарий, можно использовать pre тег, чтобы типограф не кушал контент.

Відповісти

Підтримати

A B 12.01.2011 19:44

Коментар порушує правила спільноти і видалений модераторами.

A B 12.01.2011 19:48

Спасибо. Так действительно лучше)

Відповісти

Підтримати

Підписатись на коментарі

Ваша пошта

Не підписуватись