RusFAQ.ru: Программирование на Java / JavaScript (comp.soft.prog.javaplus) : Рассылка : Subscribe.Ru

Отправляет email-рассылки с помощью сервиса Sendsay

RFpro.ru: Программирование на Java / JavaScript

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Раскрутка и оптимизация сайта в Интернете" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

← Апрель 2007 →
	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Автор

Калашников О.А.

Статистика

3.537 подписчиков
0 за неделю

← Все выпуски →

RusFAQ.ru: Программирование на Java / JavaScript

РАССЫЛКИ ПОРТАЛА RUSFAQ.RU

/ КОМПЬЮТЕРЫ И ПО / Языки программирования / Java/JavaScript
Выпуск № 361
от 22.04.2007, 16:05

Администратор:	Калашников О.А.
В рассылке:	Подписчиков: 350, Экспертов: 40
В номере:	Вопросов: 1, Ответов: 4

Вопрос № 82876: Здравствуйте! Вот у меня очередная задачка, (конечно, тоже извращенство...) Есть таблица данных, а я хочу вывести её на страницу как таблицу, и плюс кнопки для сортировки по разным колонкам с помощью Java Script. В приложен...

Вопрос № 82.876

Здравствуйте!

Вот у меня очередная задачка, (конечно, тоже извращенство...)

Есть таблица данных, а я хочу вывести её на страницу как таблицу, и плюс кнопки для сортировки по разным колонкам с помощью Java Script.

В приложении упрощённый вариант скрипта. Он также работает (я на нём алгоритм тестил), но есть несколько проблем.

1.1. во первых строки не связаны (когда сортируется первый столбец, второй остаётся не тронутым)
1.2. тоже самое касается фильтрации (по тем же самым причинам)
я не врубился как нужно правильно сортировать, или как тут нужно делать многомерный массив.

2. В большом варианте, записей очень много (сейчас реально более 2000, а предполагается ещё больше)
Так вот мой скрипт глохнет, в чём проблема? Памети не хватает или JavaScript неподдерживает такие объёмы?

Возможно есть более корректный вариант, кто знает подскажите пожалуйста! И pls на русском!
Приложение:
<html> <head> <title>чуваки</title> </head> <body> <p> </p> <table><thead><tr> <th><span title="нужно отсортировать по имени в прямом / обратном порядке" onclick="viewuser(sex,1);">имя</span></th> <th><span title="нужно отсортировать по телефону в прямом / обратном порядке" onclick="viewuser(sex,2);">тел</span></th> </tr></thead><div id="al1"> <! здесь вставляемый текст > </div> </table> <script> var user = new Array(); var sex = "f"; user[0] = new Array("1", "2", "3", "4", "5", "6", "7"); user[1] = new Array("Коля", "Петя", "Вася", "Саша", "Толя", "Оля", "Аня"); user[2] = new Array("123", "456", "789", "109", "906", "244", "306"); user[3] = new Array("m", "m", "m", "m", "m", "f", "f"); function viewuser(l,s) { var a = "<tbody>"; // если указан столбец, то сортируем его if(s != undefined) { user[s].sort(); } // если пол не задан то мальчики if(l == undefined) l = "m"; for(i = 0; i < user[0].length; i++) { if(l == user[3][i]) { a += "<tr><td>"+user[1][i].link(user[0][i]+".html")+"</td><td>"+user[2][i]+"</tr>"; } } a += "</tbody>"; document.getElementById("al1").innerHTML = a; } viewuser(sex); </script> <p>есть <button onclick="sex='m'; viewuser(sex)">мальчики</button> и <button onclick="sex='f'; viewuser(sex)">девочки</button></p> <p> </p> </body> </html>

Отправлен: 16.04.2007, 23:48
Вопрос задал: Талипов А Н (статус: 3-ий класс)
Всего ответов: 4
Мини-форум вопроса >>> (сообщений: 5)

Отвечает: Зенченко Константин Николаевич
Здравствуйте, Талипов А Н!

Постройте массив по другому:

var user = new Array()
i=0
user[i++]=new Array('nameA','telefonА','sexА')
user[i++]=new Array('nameB','telefonB','sexB')

теперь когда вы вносите любые изменения у Вас вся информация собрана в одном месте (не нужно считать номера изменяемых записей).
Удачи!
---------
И только наступив на грабли мы преобретаем драгоценный опыт!

Ответ отправил: Зенченко Константин Николаевич (статус: 10-ый класс)
Ответ отправлен: 17.04.2007, 10:55

Отвечает: Игорь Елизаров
Здравствуйте, Талипов А Н!
наверное для большого количества записей уже надо применять СУБД, например MySQL , а там и отбор по параметрам и сортировка делается уже стандартными запросами.

С уважением, Игорь
---------
Пользователь - тоже человек..

Ответ отправил: Игорь Елизаров (статус: 10-ый класс)
Ответ отправлен: 17.04.2007, 11:59

Отвечает: az.esm
Здравствуйте, Талипов А Н!
Можно организовать массив другим путем.
В приложении смотрите пример.
Эта организация массива решит вопрос №1.
Только для этого нужно будет написать свой алгоритм сортировки.
Можете использовать простой метод "пузырька". Описания алгоритмов сортировки поищите в google. Найдете много вариантов.

По поводу второго вопроса. У меня по такому же принципу работает база на 3400 позиций. С JScript никаких проблем не возникает.

И желательно базу держать не в HTML странице, а во внешнем текстовом файле и считывать его при каждой загрузки страницы.
Приложение:
var user = new Array(); user[n] = new Object(); user[n].Name = "имя"; user[n].Surname = "фамилия"; user[n].Sex = "стать";
---------
if (Something != "Идеально") Result = null; //JavaScript

Ответ отправил: az.esm (статус: 6-ой класс)
Ответ отправлен: 17.04.2007, 12:09

Отвечает: HookEst
Здравствуйте, Талипов А Н!
Посмотрите мою реализацию.
1. Для хранения записей не использую отдельных массивов(user[0],user[1]...),
все данные уже прописаны в HTML таблицы, там их и беру.

2. Для изменения структуры таблицы, использую не innerHTML, а методы таблицы(insertRow,insertCell...) и методы DOM(appendChild,insertBefore...)

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

на моей машине(не самой мощной)сортировка 2000 строк, первый раз занимает 4сек, все последующие 1сек.
смотрите приложение

Успехов.
Приложение:
<html> <body> <hr> <button onclick="sortby(0)">по имени</button> <button onclick="sortby(1)">по телефону</button> <button onclick="hide('М')">Ж</button> <button onclick="hide('Ж')">М</button> <button onclick="hide('')">ВСЕ</button> <hr> <table id=tbl BORDER=1> <thead><tr><th>Имя</th><th>тел.</th><th>пол</th></tr></thead> <tbody></tbody> </table> <script> //создаю тестовую таблицу //кол-во строк var RECORD_COUNT=2000 function createTable(){ var tb=tbl.tBodies[0] for(i=0;i<RECORD_COUNT;i++){ with(tb.insertRow()){ with(insertCell()){ innerText="Name"+Math.round(Math.random()*i) } with(insertCell()){ innerText=Math.round(Math.random()*10000000) } with(insertCell()){ innerText=(i%2)?'М':'Ж' } } } } function by0(c1,c2){ //sortFunction для текстовых ячеек //возвращает 0 если a==b, 1 если a>b, -1 если a<b var a=c1.cells[0].innerText var b=c2.cells[0].innerText return (a==b)?0:((a>b)?1:-1) } function by1(c1,c2){ //sortFunction для числовых ячеек //возвращает 0 если a==b, 1 если a>b, -1 если a<b var a=parseInt(c1.cells[1].innerText) var b=parseInt(c2.cells[1].innerText) return (a==b)?0:((a>b)?1:-1) } function sortby(col){ //tbl.csorted - текущий отсортированный столбец //если уже отсортировано - выходим if(col==tbl.csorted)return; var tb=tbl.tBodies[0] //tbl.rsorted - кэш отсортированных массивов ссылок на строки if(!tbl.rsorted)tbl.rsorted=[] if(!tbl.rsorted[col]){ //если массив для этого столбца не существует, создаем его var a=[]; for(i=0,l=tb.rows.length;i<l;i++){ a[i]=tb.rows[i] } //0-й сортируем как текст, 1-й - как числа a.sort((col==0)?by0:by1) tbl.rsorted[col]=a }else{ a=tbl.rsorted[col] } //последовательно, в отсортированном порядке перемещаем строки в конец for(i=0,l=a.length;i<l;i++){ tb.insertBefore(a[i]) } tbl.csorted=col } function hide(v){ //скрывает строки у которых текст 2-й ячейки равен v //остальные показывает //если уже скрыты - выходим if(v==tbl.rhidden)return; var rs=tbl.tBodies[0].rows for(i=0,l=rs.length;i<l;i++) rs[i].style.display=(rs[i].cells[2].innerText==v)?'none':''; tbl.rhidden=v } createTable() </script> </body> </html>

Ответ отправил: HookEst (статус: Студент)
Ответ отправлен: 18.04.2007, 10:15
Оценка за ответ: 5
Комментарий оценки:
Спасибо ещё раз, ваш ответ мне помог.
Как уже писал на минифоруме я не знал про insertrow и insertCell, в моём случае это упрощает код, и действительно позволяет облегчить JavaScript.

Отправить вопрос экспертам этой рассылки

Приложение (если необходимо):

* Код программы, выдержки из закона и т.п. дополнение к вопросу.
Эта информация будет отображена в аналогичном окне как есть.

Обратите внимание!
Вопрос будет отправлен всем экспертам данной рассылки!
Для того, чтобы отправить вопрос выбранным экспертам этой рассылки или
экспертам другой рассылки портала RusFAQ.ru, зайдите непосредственно на RusFAQ.ru.

Форма НЕ работает в почтовых программах The BAT! и MS Outlook (кроме версии 2003+)!
Чтобы отправить вопрос, откройте это письмо в браузере или зайдите на сайт RusFAQ.ru.

© 2001-2007, Портал RusFAQ.ru, Россия, Москва. Авторское право: ООО "Мастер-Эксперт Про" Email: support@rusfaq.ru, тел.: +7 (926) 535-23-31 Авторские права \| Реклама на портале Версия системы: 4.50 (beta) от 15.04.2007

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}