Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.06.2016, 13:49
Аватар для kristow
Аспирант
Отправить личное сообщение для kristow Посмотреть профиль Найти все сообщения от kristow
 
Регистрация: 26.02.2015
Сообщений: 49

Две таблицы с сортировкой
Добрый день.
Необходимо на одной странице вывести две таблицы с функцией сортировки по столбцам.
Пример брал отсюда
Демо

Одна таблица на странице работает отлично.
Но если вставляю еще одну, то на второй не работает сортировка, а на первой по прежнему работает.
Подскажите как адаптировать скрипт, чтобы можно было использовать больше одной таблицы с сортировкой на одной странице?
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2016, 16:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

kristow,
где код инициализации второй таблицы?
Ответить с цитированием
  #3 (permalink)  
Старый 29.06.2016, 16:24
Аватар для kristow
Аспирант
Отправить личное сообщение для kristow Посмотреть профиль Найти все сообщения от kristow
 
Регистрация: 26.02.2015
Сообщений: 49

Вот пример с двумя таблицами, первая работает, а вторая нет.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://ruseller.com/lessons/les227/example/style.css" />
</head>
<body>
	<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
		<thead>
			<tr>
				<th class="nosort"><h3>ID</h3></th>
				<th><h3>Name</h3></th>
				<th><h3>Phone</h3></th>
				<th><h3>Email</h3></th>
				<th><h3>Zip</h3></th>
				<th><h3>Birthdate</h3></th>
				<th><h3>Last Access</h3></th>
				<th><h3>Rating</h3></th>
				<th><h3>Done</h3></th>
				<th><h3>Salary</h3></th>
				<th><h3>Score</h3></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Ezekiel Hart</td>
				<td>(627) 536-4760</td>
				<td><a href="mailto:#">tortor@est.ca</a></td>
				<td>53082</td>
				<td>12/02/1962</td>
				<td>March 26, 2009</td>
				<td>-7</td>
				<td>7%</td>
				<td>$73,229</td>
				<td>6.9</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Jaquelyn Pace</td>
				<td>(921) 943-5780</td>
				<td><a href="mailto:#">in@elementum.org</a></td>
				<td>46789</td>
				<td>06/03/1957</td>
				<td>October 20, 2006</td>
				<td>-7</td>
				<td>33%</td>
				<td>$130,752</td>
				<td>4.9</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Lois Pickett</td>
				<td>(835) 361-5993</td>
				<td><a href="mailto:#">arcu.ac@disse.ca</a></td>
				<td>9814</td>
				<td>10/15/1983</td>
				<td>June 01, 1999</td>
				<td>4</td>
				<td>44%</td>
				<td>$48,684</td>
				<td>5.5</td>
			</tr>
			<tr>
				<td>4</td>
				<td>Keane Raymond</td>
				<td>(605) 803-1561</td>
				<td><a href="mailto:#">at.risus.Nunc@ipsum.com</a></td>
				<td>97129</td>
				<td>07/30/1982</td>
				<td>July 24, 1996</td>
				<td>5</td>
				<td>20%</td>
				<td>$7,023</td>
				<td>9.5</td>
			</tr>
			<tr>
				<td>5</td>
				<td>Porter Thomas</td>
				<td>(666) 569-9894</td>
				<td><a href="mailto:#">non@Proin.ca</a></td>
				<td>59953</td>
				<td>09/27/1986</td>
				<td>December 05, 2007</td>
				<td>1</td>
				<td>66%</td>
				<td>$69,875</td>
				<td>0.9</td>
			</tr>
			<tr>
				<td>6</td>
				<td>Imani Murphy</td>
				<td>(771) 294-6690</td>
				<td><a href="mailto:#">Aenean.sed@elit.ca</a></td>
				<td>69771</td>
				<td>10/23/1970</td>
				<td>December 08, 1996</td>
				<td>-1</td>
				<td>30%</td>
				<td>$113,763</td>
				<td>4.9</td>
			</tr>
			<tr>
				<td>7</td>
				<td>Zachery Guthrie</td>
				<td>(851) 784-4129</td>
				<td><a href="mailto:#">nunc.nulla@vel.com</a></td>
				<td>66960</td>
				<td>12/22/1972</td>
				<td>September 20, 2002</td>
				<td>-5</td>
				<td>24%</td>
				<td>$130,248</td>
				<td>6.9</td>
			</tr>
			<tr>
				<td>48</td>
				<td>Charity Hahn</td>
				<td>(395) 200-9188</td>
				<td><a href="mailto:#">ac@Quisque.edu</a></td>
				<td>28260</td>
				<td>08/04/1976</td>
				<td>January 17, 2009</td>
				<td>-2</td>
				<td>86%</td>
				<td>$3,246</td>
				<td>5.5</td>
			</tr>
			<tr>
				<td>49</td>
				<td>Katell Crosby</td>
				<td>(259) 659-7498</td>
				<td><a href="mailto:#">tincidunt.vehicula@ura.com</a></td>
				<td>31001</td>
				<td>12/31/1961</td>
				<td>January 02, 2007</td>
				<td>8</td>
				<td>10%</td>
				<td>$67,319</td>
				<td>8.9</td>
			</tr>
			<tr>
				<td>50</td>
				<td>Eden Burks</td>
				<td>(576) 196-6013</td>
				<td><a href="mailto:#">lorem@magna.com</a></td>
				<td>30822</td>
				<td>02/27/1964</td>
				<td>April 27, 2002</td>
				<td>3</td>
				<td>6%</td>
				<td>$109,631</td>
				<td>2.5</td>
			</tr>
		</tbody>
  </table>
	<div id="controls">
		<div id="perpage">
			<select onchange="sorter.size(this.value)">
			<option value="5">5</option>
				<option value="10" selected="selected">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
			<span>Entries Per Page</span>
		</div>
		<div id="navigation">
			<img src="http://ruseller.com/lessons/les227/example/images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
			<img src="http://ruseller.com/lessons/les227/example/images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
			<img src="http://ruseller.com/lessons/les227/example/images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
			<img src="http://ruseller.com/lessons/les227/example/images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
		</div>
		<div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
	</div>
	<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
		<thead>
			<tr>
				<th class="nosort"><h3>ID</h3></th>
				<th><h3>Name</h3></th>
				<th><h3>Phone</h3></th>
				<th><h3>Email</h3></th>
				<th><h3>Zip</h3></th>
				<th><h3>Birthdate</h3></th>
				<th><h3>Last Access</h3></th>
				<th><h3>Rating</h3></th>
				<th><h3>Done</h3></th>
				<th><h3>Salary</h3></th>
				<th><h3>Score</h3></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Ezekiel Hart</td>
				<td>(627) 536-4760</td>
				<td><a href="mailto:#">tortor@est.ca</a></td>
				<td>53082</td>
				<td>12/02/1962</td>
				<td>March 26, 2009</td>
				<td>-7</td>
				<td>7%</td>
				<td>$73,229</td>
				<td>6.9</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Jaquelyn Pace</td>
				<td>(921) 943-5780</td>
				<td><a href="mailto:#">in@elementum.org</a></td>
				<td>46789</td>
				<td>06/03/1957</td>
				<td>October 20, 2006</td>
				<td>-7</td>
				<td>33%</td>
				<td>$130,752</td>
				<td>4.9</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Lois Pickett</td>
				<td>(835) 361-5993</td>
				<td><a href="mailto:#">arcu.ac@disse.ca</a></td>
				<td>9814</td>
				<td>10/15/1983</td>
				<td>June 01, 1999</td>
				<td>4</td>
				<td>44%</td>
				<td>$48,684</td>
				<td>5.5</td>
			</tr>
			<tr>
				<td>4</td>
				<td>Keane Raymond</td>
				<td>(605) 803-1561</td>
				<td><a href="mailto:#">at.risus.Nunc@ipsum.com</a></td>
				<td>97129</td>
				<td>07/30/1982</td>
				<td>July 24, 1996</td>
				<td>5</td>
				<td>20%</td>
				<td>$7,023</td>
				<td>9.5</td>
			</tr>
			<tr>
				<td>5</td>
				<td>Porter Thomas</td>
				<td>(666) 569-9894</td>
				<td><a href="mailto:#">non@Proin.ca</a></td>
				<td>59953</td>
				<td>09/27/1986</td>
				<td>December 05, 2007</td>
				<td>1</td>
				<td>66%</td>
				<td>$69,875</td>
				<td>0.9</td>
			</tr>
			
			<tr>
				<td>49</td>
				<td>Katell Crosby</td>
				<td>(259) 659-7498</td>
				<td><a href="mailto:#">tincidunt.vehicula@ura.com</a></td>
				<td>31001</td>
				<td>12/31/1961</td>
				<td>January 02, 2007</td>
				<td>8</td>
				<td>10%</td>
				<td>$67,319</td>
				<td>8.9</td>
			</tr>
			<tr>
				<td>50</td>
				<td>Eden Burks</td>
				<td>(576) 196-6013</td>
				<td><a href="mailto:#">lorem@magna.com</a></td>
				<td>30822</td>
				<td>02/27/1964</td>
				<td>April 27, 2002</td>
				<td>3</td>
				<td>6%</td>
				<td>$109,631</td>
				<td>2.5</td>
			</tr>
		</tbody>
  </table>
	<div id="controls">
		<div id="perpage">
			<select onchange="sorter.size(this.value)">
			<option value="5">5</option>
				<option value="10" selected="selected">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
			<span>Entries Per Page</span>
		</div>
		<div id="navigation">
			<img src="http://ruseller.com/lessons/les227/example/images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
			<img src="http://ruseller.com/lessons/les227/example/images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
			<img src="http://ruseller.com/lessons/les227/example/images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
			<img src="http://ruseller.com/lessons/les227/example/images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
		</div>
		<div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
	</div>
	<script type="text/javascript" src="http://ruseller.com/lessons/les227/example/script.js"></script>
	<script type="text/javascript">
  var sorter = new TINY.table.sorter("sorter");
	sorter.head = "head";
	sorter.asc = "asc";
	sorter.desc = "desc";
	sorter.even = "evenrow";
	sorter.odd = "oddrow";
	sorter.evensel = "evenselected";
	sorter.oddsel = "oddselected";
	sorter.paginate = true;
	sorter.currentid = "currentpage";
	sorter.limitid = "pagelimit";
	sorter.init("table",1);
  </script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 29.06.2016, 16:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

kristow,
медитируйте над двоечкой в коде везде
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinyTable</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
	<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">

  </table>
	<div id="controls">
		<div id="perpage">
			<select onchange="sorter.size(this.value)">
			<option value="5">5</option>
				<option value="10" selected="selected">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
			<span>Entries Per Page</span>
		</div>
		<div id="navigation">
			<img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
			<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
			<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
			<img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
		</div>
		<div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
	</div>

    <table cellpadding="0" cellspacing="0" border="0" id="table2" class="sortable">

  </table>
	<div id="controls">
		<div id="perpage">
			<select onchange="sorter2.size(this.value)">
			<option value="5">5</option>
				<option value="10" selected="selected">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
			<span>Entries Per Page</span>
		</div>
		<div id="navigation">
			<img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter2.move(-1,true)" />
			<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter2.move(-1)" />
			<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter2.move(1)" />
			<img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter2.move(1,true)" />
		</div>
		<div id="text">Displaying Page <span id="currentpage2"></span> of <span id="pagelimit2"></span></div>
	</div>
	<script type="text/javascript" src="script.js"></script>
	<script type="text/javascript">
  var sorter = new TINY.table.sorter("sorter");
	sorter.head = "head";
	sorter.asc = "asc";
	sorter.desc = "desc";
	sorter.even = "evenrow";
	sorter.odd = "oddrow";
	sorter.evensel = "evenselected";
	sorter.oddsel = "oddselected";
	sorter.paginate = true;
	sorter.currentid = "currentpage";
	sorter.limitid = "pagelimit";
	sorter.init("table",1);

  var sorter2 = new TINY.table.sorter("sorter2");
	sorter2.head = "head";
	sorter2.asc = "asc";
	sorter2.desc = "desc";
	sorter2.even = "evenrow";
	sorter2.odd = "oddrow";
	sorter2.evensel = "evenselected";
	sorter2.oddsel = "oddselected";
	sorter2.paginate = true;
	sorter2.currentid = "currentpage2";
	sorter2.limitid = "pagelimit2";
	sorter2.init("table2",1);

  </script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 29.06.2016, 17:09
Аватар для kristow
Аспирант
Отправить личное сообщение для kristow Посмотреть профиль Найти все сообщения от kristow
 
Регистрация: 26.02.2015
Сообщений: 49

Пробовал играть с добавлением 2 везде, даже script.js начал переделывать...
Потом посмотрел на предложенный вариант от РОНИ, и заметил у себя косяк... В итоге заработало без изменения script.js.

Спасибо Рони за помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Генерация таблицы из JSON Lemme Общие вопросы Javascript 32 23.07.2015 21:55
Как передать данные в другую панель из выбранной строки таблицы. layout: 'card'. Пролетарий ExtJS 5 03.06.2015 22:53
Допилить две библиотеки "colResizable" и "Tablesorter" под table с фиксир. head Neznayka Работа 0 15.10.2013 15:09
Через ajax отправить много данных из таблицы на сервер Heger jQuery 3 29.08.2012 18:51
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 20.12.2008 00:35