Ok quell'articolo e' verametne valido.
vi posto la prova funzionante leggermente modificata da me dovete scaricarvi l'ultima versione di jquery
le fonti sono
articolo originale
codice preso dall'articolo e modificato
Codice PHP:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type='text/javascript' src='script/jquery.js'></script>
</head>
<body>
<table class="sortable paging">
<thead>
<tr>
<th>Title</th>
<th>Author(s)</th>
<th>PublishDate</th>
<th class="sort-numeric">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Building Websites with Joomla! 1.5 Beta 1</td>
<td>Hagen Graf</td>
<td>Feb 2007</td>
<td >40.9</td>
</tr>
<tr>
<td>Abcd</td>
<td>Hagen GGraf</td>
<td>Feb 2007</td>
<td>30.49</td>
</tr>
<tr>
<td>Efg</td>
<td>Hagen GGraf</td>
<td>Feb 2007</td>
<td>45.49</td>
</tr>
<tr>
<td>MMMM</td>
<td>eeeaf</td>
<td>Feb 2007</td>
<td>47.49</td>
</tr>
<tr>
<td>aBuilding Websites with Joomla! 1.5 Beta 1</td>
<td>aHagen Graf</td>
<td>Feb 2007</td>
<td>100.49</td>
</tr>
<tr>
<td>tAbcd</td>
<td>tHagen GGraf</td>
<td>Feb 2007</td>
<td>40.49</td>
</tr>
<tr>
<td>yEfg</td>
<td>yHagen GGraf</td>
<td>Feb 2007</td>
<td>20.49</td>
</tr>
<tr>
<td>uMMMM</td>
<td>eeeaf</td>
<td>Feb 2007</td>
<td>430.49</td>
</tr>
</tbody>
</table>
<script type='text/javascript'>
/*
--------------------------------------------------
Table sorting
--------------------------------------------------
*/
var alternateRowColors = function($table) {
$('tbody tr:has(td):odd', $table).removeClass('alt').addClass('odd');
$('tbody tr:has(td):even', $table).removeClass('odd').addClass('alt');
};
$('table.sortable').each(function() {
var $table = $(this);
alternateRowColors($table);
$table.find('th').each(function(column) {
var findSortKey;
if ($(this).is('.sort-numeric')) {
findSortKey = function($cell) {
var key = parseFloat($cell.text().replace('/^[^d.]*/', ''));
return isNaN(key) ? 0 : key;
};
}
else if ($(this).is('.sort-date')) {
findSortKey = function($cell) {
return Date.parse('1 ' + $cell.text());
};
}
else {
//($(this).is('.sort-alpha')) {
findSortKey = function($cell) {
return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
};
}
if (findSortKey) {
$(this).addClass('clickable').hover(
function() {
$(this).addClass('hover');
}
, function() {
$(this).removeClass('hover');
}
)
.click(function() {
var newDirection = 1;
if ($(this).is('.sorted-asc')) {
newDirection = -1;
}
rows = $table.find('tbody > tr').get();
$.each(rows, function(index, row) {
row.sortKey = findSortKey($(row).children('td').eq(column));
});
rows.sort(function(a, b) {
var result = 0;
if (a.sortKey < b.sortKey) result = -1;
if (a.sortKey > b.sortKey) result = 1;
result = result * newDirection;
//if (a.sortKey [b] b.sortKey) return newDirection;
return result;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');
var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');
if (newDirection == 1) {
$sortHead.addClass('sorted-asc');
}
else {
$sortHead.addClass('sorted-desc');
}
$table.find('td').removeClass('sorted')
.filter(':nth-child(' + (column + 1) + ')')
.addClass('sorted');
alternateRowColors($table);
$table.trigger('repaginate');
});
}
});
});
/*
--------------------------------------------------
Table paging
--------------------------------------------------
*/
$('table.paging').each(function() {
var currentPage = 0;
var numPerPage = 3;
var $table = $(this);
$table.bind('repaginate', function() {
$table.find('tbody tr').show()
.filter(':lt(' + currentPage * numPerPage + ')')
.hide()
.end()
.filter(':gt(' + ((currentPage + 1) * numPerPage - 1) + ')')
.hide()
.end();
});
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
if (numPages > 1) {
var $pager = $('[/b]<div class="pager">[b]');
//$('<span class="pager-results">' + numRows + ' results found').appendTo($pager);
//$('<span class="pager-message">Showing page ' + (currentPage + 1) + ' of ' + numPages + '').appendTo($pager);
for (var page = 0; page < numPages; page++) {
$('<span class="page-number">' + (page + 1) + '</span>')
.bind('click', {'newPage': page}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
$(this).parent().find('.pager-message').text('Showing page ' + (currentPage + 1) + ' of ' + numPages);
})
.appendTo($pager).addClass('clickable');
}
$pager.find('span.page-number:first').addClass('active');
$pager.insertBefore($table);
$table.trigger('repaginate');
}
});
</script>
</body>
</html>
e questo e' il css relativo
Codice PHP:
/* CSS Document */
div.pager {
padding: 10px;
margin: 10px;
}
span.page-number {
padding: 2px;
border-bottom: 1px #000000 solid;
margin-right: 10px;
}
span.active {
padding: 2px;
border: 1px #000000 solid;
margin-right: 10px;
}
table {
width: 1000px;
}
table th {
width: 25%;
}
td.sorted {
background-color: #CCCCCC;
}
Ciau
Andrea
?
Rispondi quotando
