Две таблицы с сортировкой
Добрый день.
Необходимо на одной странице вывести две таблицы с функцией сортировки по столбцам. Пример брал отсюда Демо Одна таблица на странице работает отлично. Но если вставляю еще одну, то на второй не работает сортировка, а на первой по прежнему работает. Подскажите как адаптировать скрипт, чтобы можно было использовать больше одной таблицы с сортировкой на одной странице? :write: |
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" />
<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>
|
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>
|
Пробовал играть с добавлением 2 везде, даже script.js начал переделывать...
Потом посмотрел на предложенный вариант от РОНИ, и заметил у себя косяк... В итоге заработало без изменения script.js. Спасибо Рони за помощь! |
| Часовой пояс GMT +3, время: 14:28. |