added server side driven pagination for search tabs

git-svn-id: https://svn.berlios.de/svnroot/repos/yacy/trunk@4572 6c8d7289-2bf4-0310-a012-ef5d649a1542
pull/1/head
apfelmaennchen 17 years ago
parent 25f5035f23
commit 3c710f22cd

@ -0,0 +1,31 @@
.pagination {
font-size: 1em;
margin-left: 26px;
margin-top: 25px;
}
.pagination a {
text-decoration: none;
border: solid 1px #AAE;
color: #15B;
}
.pagination a, .pagination span {
display: block;
float: left;
padding: 0.3em 0.5em;
margin-right: 5px;
margin-bottom: 5px;
}
.pagination .current {
background: #26B;
color: #fff;
border: solid 1px #AAE;
}
.pagination .current.prev, .pagination .current.next{
color:#999;
border-color:#999;
background:#fff;
}

@ -9,7 +9,8 @@
<link media="screen" type="text/css" href="css/base.css" rel="stylesheet">
<link media="screen" type="text/css" href="css/ui.tabs.css" rel="stylesheet">
<link media="screen" type="text/css" href="css/jquery.tablesorter.pager.css" rel="stylesheet">
<link media="screen" type="text/css" href="css/jquery.tablesorter.pager.css" rel="stylesheet">
<link media="screen" type="text/css" href="css/jquery.pagination.css" rel="stylesheet">
<script src="js/jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
@ -18,9 +19,12 @@
<script src="js/jquery.metadata.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/jquery.field.min.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
<script src="js/ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
/* Initialize Tabs and set up close function */
var $tabs = $('#container ul').tabs()
.bind('add.ui-tabs', function(e, ui) {
var li = $(ui.tab).parents('li:eq(0)')[0];
@ -29,7 +33,14 @@
$tabs.tabs('remove', $('li', $tabs).index(li));
});
});
insert_sidebar();
/* Insert Sidebar */
$('<div id="pager" class="boxed"></div>').appendTo('#sidebar')
$("#pager").load("sidebar/sidebar_pager.html");
$('<div id="example" class="boxed"></div>').appendTo('#sidebar')
$("#example").load("sidebar/sidebar.html");
/* Load Search Result into new Tab */
$('#searchbox').submit(function() {
var tabnr = $('#container > ul').tabs('length');
var result = "result.html?" + $('#searchbox').formSerialize();
@ -39,11 +50,7 @@
$tabs.tabs('select',tabnr);
return false;
});
});
function insert_sidebar() {
$('<div id="pager" class="boxed"></div>').appendTo('#sidebar')
$("#pager").load("sidebar/sidebar_pager.html");
}
});
</script>
</head>
@ -75,9 +82,9 @@
<label for="video">Video</label>&nbsp;&nbsp;
<input type="radio" id="appl" name="contentdom" value="app"/>
<label for="appl">Applications</label>
</div>
</div>
<input type="hidden" name="former" value="" />
<input type="hidden" name="count" value="3" />
<input type="hidden" name="count" value="15" />
<input type="hidden" name="offset" value="0" />
<input type="hidden" name="resource" value="global" />
<input type="hidden" name="urlmaskfilter" value=".*" />

@ -0,0 +1,166 @@
/**
* This jQuery plugin displays pagination links inside the selected elements.
*
* @author Gabriel Birke (birke *at* d-scribe *dot* de)
* @version 1.1
* @param {int} maxentries Number of entries to paginate
* @param {Object} opts Several options (see README for documentation)
* @return {Object} jQuery Object
*/
jQuery.fn.pagination = function(maxentries, opts){
opts = jQuery.extend({
items_per_page:10,
num_display_entries:10,
current_page:0,
num_edge_entries:0,
link_to:"#",
prev_text:"Prev",
next_text:"Next",
ellipse_text:"...",
prev_show_always:true,
next_show_always:true,
callback:function(){return false;}
},opts||{});
return this.each(function() {
/**
* Calculate the maximum number of pages
*/
function numPages() {
return Math.ceil(maxentries/opts.items_per_page);
}
/**
* Calculate start and end point of pagination links depending on
* current_page and num_display_entries.
* @return {Array}
*/
function getInterval() {
var ne_half = Math.ceil(opts.num_display_entries/2);
var np = numPages();
var upper_limit = np-opts.num_display_entries;
var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
return [start,end];
}
/**
* This is the event handling function for the pagination links.
* @param {int} page_id The new page number
*/
function pageSelected(page_id, evt){
current_page = page_id;
drawLinks();
var continuePropagation = opts.callback(page_id, panel);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
}
/**
* This function inserts the pagination links into the container element
*/
function drawLinks() {
panel.empty();
var interval = getInterval();
var np = numPages();
// This helper function returns a handler function that calls pageSelected with the right page_id
var getClickHandler = function(page_id) {
return function(evt){ return pageSelected(page_id,evt); }
}
// Helper function for generating a single link (or a span tag if it'S the current page)
var appendItem = function(page_id, appendopts){
page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
if(page_id == current_page){
var lnk = $("<span class='current'>"+(appendopts.text)+"</span>");
}
else
{
var lnk = $("<a>"+(appendopts.text)+"</a>")
.bind("click", getClickHandler(page_id))
.attr('href', opts.link_to.replace(/__id__/,page_id));
}
if(appendopts.classes){lnk.addClass(appendopts.classes);}
panel.append(lnk);
}
// Generate "Previous"-Link
if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
}
// Generate starting points
if (interval[0] > 0 && opts.num_edge_entries > 0)
{
var end = Math.min(opts.num_edge_entries, interval[0]);
for(var i=0; i<end; i++) {
appendItem(i);
}
if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
{
jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
}
}
// Generate interval links
for(var i=interval[0]; i<interval[1]; i++) {
appendItem(i);
}
// Generate ending points
if (interval[1] < np && opts.num_edge_entries > 0)
{
if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
{
jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
}
var begin = Math.max(np-opts.num_edge_entries, interval[1]);
for(var i=begin; i<np; i++) {
appendItem(i);
}
}
// Generate "Next"-Link
if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
appendItem(current_page+1,{text:opts.next_text, classes:"next"});
}
}
// Extract current_page from options
var current_page = opts.current_page;
// Create a sane value for maxentries and items_per_page
maxentries = (!maxentries || maxentries < 0)?1:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
// Store DOM element for easy access from all inner functions
var panel = jQuery(this);
// Attach control functions to the DOM element
this.selectPage = function(page_id){ pageSelected(page_id);}
this.prevPage = function(){
if (current_page > 0) {
pageSelected(current_page - 1);
return true;
}
else {
return false;
}
}
this.nextPage = function(){
if(current_page < numPages()-1) {
pageSelected(current_page+1);
return true;
}
else {
return false;
}
}
// When all initialisation is done, draw the links
drawLinks();
});
}

@ -1,4 +1,64 @@
#(input)#
::
<script type="text/javascript">
$(function() {
$("input[@name='search']").setValue("#[former]#");
$("input[@name='contentdom']").setValue("#[contentdom]#");
$("input[@name='former']").setValue("#[former]#");
$("input[@name='count']").setValue("#[count]#");
$("input[@name='offset']").setValue("#[offset]#");
$("input[@name='resource']").setValue("#[resource]#");
$("input[@name='urlmaskfilter']").setValue("#[urlmaskfilter]#");
$("input[@name='prefermaskfilter']").setValue("#[prefermaskfilter]#");
$("input[@name='depth']").setValue("#[depth]#");
$("input[@name='cat']").setValue("#[cat]#");
$("input[@name='type']").setValue("#[type]#");
$("input[@name='display']").setValue("#[display]#");
$("input[@name='input']").setValue("#[input]#");
$("input[@name='constraint']").setValue("#[constraint]#");
});
</script>
::
#(/input)#
<!-- type the number of results -->
#(num-results)#
::
<p>No Results.</p>
::
<p>No Results. (length of search words must be at least 3 characters)</p>
::
<script type="text/javascript">
$(function() {
var totalcount = #[totalcount]#;
var size = $("input[@name='count']").getValue();
var offset = $("input[@name='offset']").getValue();
if (offset != 0) {
var page = ((offset-1)/size);
} else {
var page = 0;
}
$("#pagination").pagination(totalcount, {
current_page:page,
items_per_page:size,
num_edge_entries:2,
num_display_entries:10,
callback: loadContents
});
});
function loadContents(page_id, jq) {
var count = $("input[@name='count']").getValue();
var offset = ((page_id*count)+1);
$("input[@name='offset']").setValue(offset);
var result = "result.html?" + $('#searchbox').formSerialize();
var selected = $('#container ul').data('selected.ui-tabs');
$('#container ul').tabs('url', selected, result);
$('#container ul').tabs('load', selected);
}
</script>
::
#(/num-results)#
<div id="#[ID]#"></div>
<div id="pagination" class="pagination">[Pagination]</div>
<!-- linklist begin -->
#(resultTable)#::<table width="100%"><tr class="TableHeader"><td width="30%">Media</td><td width="70%">URL</tr>#(/resultTable)#
#{results}#
@ -8,7 +68,8 @@
$.get("/yacy/ui/ritem.html?rss=false&item=#[item]#&eventID=#[eventID]#", function(html) {
$(id).append(html);
$(id).trigger("update");
});
});
return false;
});
</script>
#{/results}#
@ -20,4 +81,3 @@

@ -1,11 +1,11 @@
#(content)#::
<div class="searchresults">
<h3 class="linktitle">
<img src="../../ViewImage.png?width=16&height=16&code=#[faviconCode]#" id="f#[urlhash]#" class="favicon" width="16" height="16" alt="" />
<a href="#[url]#" target="_parent">#[description]#</a></h3>
<p class="snippet">#[snippet]#</p>
<p class="url"><a href="#[url]#" id="url#[urlhash]#" target="_parent">#[urlname]#</a></p>
</div>
<div class="searchresults">
<h3 class="linktitle">
<img src="../../ViewImage.png?width=16&height=16&code=#[faviconCode]#" id="f#[urlhash]#" class="favicon" width="16" height="16" alt="" />
<a href="#[url]#" target="_parent">#[description]#</a></h3>
<p class="snippet">#[snippet]#</p>
<p class="url"><a href="#[url]#" id="url#[urlhash]#" target="_parent">#[urlname]#</a></p>
</div>
::
#{items}#
<div class="thumbcontainer">

Loading…
Cancel
Save