BBcode таблицы с функцией сортировки по столбцам по клику

[Woland]

Хочу сделать внутри пользовательского сообщения каталог, подобный этому, где есть возможность сортировки по столбцу, на котором кликнешь мышкой. Может уже есть что-то подобное, ткните ссылкой? Если нету, помогите сделать, пожалуйста.. чтобы это можно было добавить в BBcode.

[владимир1983]

Сортировку в bbcode не реализуешь.

[Татьяна5]

Создать таблицу на отдельной странице и вставить ее в сообщение через iframe

[Woland]

Все-таки придумал, как сделать bbcode таблицы с функциями сортировки на основе http://www.tablesorter.ru/docs/
Качаем там необходимые файлы, далее в шаблон overall_header.html перед </head> следует прописать (с поправкой на локальный путь от корня форума):

Код: Выделить всё

<script type="text/javascript" src="jquery-2.0.3.min.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.min.js"></script> 

Затем создать BBcode

Использование BBCode:

Код: Выделить всё

[tsort={IDENTIFIER}][[{TEXT2}]]{TEXT}[/tsort]

Замена HTML:

Код: Выделить всё

<table id="{IDENTIFIER}" class="tablesorter" cellspacing="1" cellpadding="0" border="0">{TEXT}</table>
<script>
$(document).ready(function() 
    { 
	$("#{IDENTIFIER}").tablesorter({sortList:[[{TEXT2}]], widgets: ['zebra']});
    } 
); 
</script>

Подсказка:

Код: Выделить всё

Сортируемая таблица: [tsort=уникальный ID]опция сортировки столбцов вида [[0,1],[1,1]] контекст таблицы, обязательно с thead и tbody [/tsort]

Также необходимо в scc стиля прописать:

Код: Выделить всё

/* sorter tables */
.postbody table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
	line-height: 1.0em;
}
.postbody table.tablesorter thead tr th, .postbody table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
	height: 9px;
	color: black;
	text-align: left;
}
.postbody table.tablesorter thead tr .header, .postbody table.tsort thead tr .header {
	background-image: url(bg.gif) !important;
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}

.postbody table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
.postbody table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
.postbody table.tablesorter thead tr .headerSortUp, .postbody table.tsort thead tr .headerSortUp {
	background-image: url(asc.gif);
}
.postbody table.tablesorter thead tr .headerSortDown, .postbody table.tsort thead tr .headerSortDown {
	background-image: url(desc.gif);
}
.postbody table.tablesorter thead tr .headerSortDown, .postbody table.tablesorter thead tr .headerSortUp, .postbody table.tsort thead tr .headerSortDown, .postbody table.tsort thead tr .headerSortUp {
background-color: #8dbdd8;
}

Указанные в стилях файлы оформления bg.gif, asc.gif, desc.gif можно взять тут:
http://www.tablesorter.ru/themes/blue/blue.zip


Пример реального использования:

Код: Выделить всё

[tsort=t11][[0,0],[2,1]][thead][tr][th]..[/th][th]..[/th][th]..[/th][th]..[/th][th]..[/th][th]..[/th][th]..[/th][th]..[/th][/tr][/thead]
[tbody]
[tr][td]..[/td][td]..[/td][td]..[/td][td]..[/td][td]..[/td][td]..[/td][td]..[/td][td]..[/td][/tr]
......
[/tbody][/tsort]

В итоге получится таблица, оформленная в точности, как по ссылке: http://www.tablesorter.ru/docs/