Tablesorter - это плагин для JavaScript-библиотеки jQuery, который позволяет сортировать HTML-таблицы, включающие теги thead и tbody, без перезагрузки страницы на стороне клиента. Модуль Tablesorter в основе имеет функциональные возможности JavaScript библиотеки jQuery.
Для начала нам необходимо подключить к страничке библиотеку jQuery (например, https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js) и файл содержащий модуль jquery.tablesorter.min.js, который качаем с сайта разработчика http://tablesorter.com/
Это два обязательных компонента которые необходимы для работы модуля Tablesorter. Также подключим модуль jquery.tablesorter.pager.js для пагинации таблицы и подключим стили.
|
<link type="text/css" rel="stylesheet" href="/js/themes/blue/style.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/tablesorter-pager/jquery.tablesorter.pager.js"></script>
|
Структура таблицы должна быть такой:
основной контейнер <table> </table>, в нем должен быть контейнер заголовков, оформленный при помощи <thead> </thead>,
а непосредственно в нем располагается строка с нужными данными, записанными в <th> </th>. И тело таблицы соответственно обрамить тегами <tbody> </tbody>.
Включаем наш модуль Tablesorter следующим кодом:
|
<script type="text/javascript">
\$(document).ready(function(){
\$("#myTable2")
.tablesorter({headers: { 3: { sorter: false}, 4: { sorter: false} }})
.tablesorterPager({container: \$("#pager")})
})
</script>
|
Всё готово, нажимая на заголовки таблицы она сортируется.
И весь скрипт выглядит так:
|
#!/usr/bin/perl
use DBI;
use strict;
my $dbname='nagios_notify';
my $host='10.14.26.119';
my $user='nagios';
my $pass='superpass123';
my $dbh = DBI->
connect(" DBI:mysql:database=$dbname; host=$host", "$user", "$pass") or mydie("Couldn't connect to database");
my @servers;
print "Content-type: text/html\n\n";
print <<ENDHTML;
<head>
<center><strong>Статистика по пробникам</strong></center>
<link type="text/css" rel="stylesheet" href="/js/themes/blue/style.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/tablesorter-pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">\$(document).ready(function(){
\$("#myTable2")
.tablesorter({headers: { 3: { sorter: false}, 4: { sorter: false}, 5: { sorter: false}, 6: { sorter: false}, 7: { sorter: false}, 8: { sorter: false}, 9: { sorter: false}}})
.tablesorterPager({container: \$("#pager")})
})
</script>
ENDHTML
my $query_m = qq{select s.servername, n.date_0, n.date_1, n.status, n.description, n.asterisk_state, n.contact_group_id, n.count, n.tel_number,n.date_answer from nagios_notify.servers s, nagios_notify.nagios_ntf n where s.id_servers=n.id;};
my $sth = $dbh->prepare($query_m);
 $sth->execute();
print <<ENDHTML;
<table id="myTable2" class="tablesorter" border="1">
<thead>
<tr>
<th>servername</th>
<th>date_0</th>
<th>date_1</th>
<th>status</th>
<th>description</th>
<th>asterisk_state</th>
<th>contact_group_id</th>
<th>count</th>
<th>tel_number</th>
<th>date_answer</th>
</tr>
</thead>
<tbody>
ENDHTML
while (my @row = $sth->fetchrow_array ) {
print "<tr>\n";
foreach my $i (0..9)
{
print "<td>$row[$i]</td>\n";
}
print "</tr>\n";
}
print "</tbody>\n";
print "</table>\n";
$sth->finish;
print <<ENDHTML;
<div id="pager" class="pager" style="height:50px">
<form>
<img src="/js/tablesorter-pager/icon/first.png" class="first"/>
<img src="/js/tablesorter-pager/icon/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="/js/tablesorter-pager/icon/next.png" class="next"/>
<img src="/js/tablesorter-pager/icon/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</form>
</div>
ENDHTML
print "</head>\n";
|
Обновлено 06.04.2016 20:46
