Еще горстка материалов:

Сортировка таблиц при помощи Perl+jQuery. Плагин Tablesorter

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

unix-way