Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 623
  • Last Modified:

pagination


its a pagination in jquery. i need to change the format of the pagination display
from 1/14 to 1,2,3,4...14. pl suggest.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script src="http://projects.allmarkedup.com/jquery_quick_paginate/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://projects.allmarkedup.com/jquery_quick_paginate/jquery.quickpaginate.packed.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			$(function(){
				$("#shopping_list li").quickpaginate({ perpage: 3, pager : $("#shopping_list_counter") });
			});
		</script>	
		<style>
			.qp_counter {
				margin:  10px;
			}
			pre {
				margin: 20px 0 10px 0;
				background: #ccc !important;
				padding: 10px;
			}			
			a.qp_disabled {
				color: #888;
			}
		</style>
</head>
<body>
<ul id="shopping_list">
	<li>carrots</li>
	<li>beef</li>
	<li>pineapple</li>
	<li>tofu</li>
	<li>lettuce</li>
	<li>washing up liquid</li>
	<li>yoghurt</li>
	<li>chocolate</li>
	<li>milk</li>
	<li>bread</li>
	<li>carrots</li>
	<li>beef</li>
	<li>pineapple</li>
	<li>tofu</li>
	<li>lettuce</li>
	<li>washing up liquid</li>
	<li>yoghurt</li>
	<li>chocolate</li>
	<li>milk</li>
	<li>bread</li>
	<li>carrots</li>
	<li>beef</li>
	<li>pineapple</li>
	<li>tofu</li>
	<li>lettuce</li>
	<li>washing up liquid</li>
	<li>yoghurt</li>
	<li>chocolate</li>
	<li>milk</li>
	<li>bread</li>
	<li>carrots</li>
	<li>beef</li>
	<li>pineapple</li>
	<li>tofu</li>
	<li>lettuce</li>
	<li>washing up liquid</li>
	<li>yoghurt</li>
	<li>chocolate</li>
	<li>milk</li>
	<li>bread</li>
</ul>
<div id="shopping_list_counter"></div>
</body>
</html>

Open in new window

0
vidhubala
Asked:
vidhubala
  • 2
  • 2
1 Solution
 
prokvkCommented:
Try this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <script src="http://projects.allmarkedup.com/jquery_quick_paginate/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
                <script src="http://projects.allmarkedup.com/jquery_quick_paginate/jquery.quickpaginate.packed.js" type="text/javascript" charset="utf-8"></script>
                <script type="text/javascript" charset="utf-8">
                        $(function(){
                                $("#shopping_list li").quickpaginate({ perpage: 3, pager : $("#shopping_list_counter") });
                                
                                //alert($('span.qp_counter').html());
                                
                                var qp = $('span.qp_pagenumber').text();
                                
                                $('span.qp_counter').html('<span class="qp_pagenumber">' + qp + '</span>');
                        });
                </script>       
                <style>
                        .qp_counter {
                                margin:  10px;
                        }
                        pre {
                                margin: 20px 0 10px 0;
                                background: #ccc !important;
                                padding: 10px;
                        }                       
                        a.qp_disabled {
                                color: #888;
                        }
                </style>
</head>
<body>
<ul id="shopping_list">
        <li>carrots</li>
        <li>beef</li>
        <li>pineapple</li>
        <li>tofu</li>
        <li>lettuce</li>
        <li>washing up liquid</li>
        <li>yoghurt</li>
        <li>chocolate</li>
        <li>milk</li>
        <li>bread</li>
        <li>carrots</li>
        <li>beef</li>
        <li>pineapple</li>
        <li>tofu</li>
        <li>lettuce</li>
        <li>washing up liquid</li>
        <li>yoghurt</li>
        <li>chocolate</li>
        <li>milk</li>
        <li>bread</li>
        <li>carrots</li>
        <li>beef</li>
        <li>pineapple</li>
        <li>tofu</li>
        <li>lettuce</li>
        <li>washing up liquid</li>
        <li>yoghurt</li>
        <li>chocolate</li>
        <li>milk</li>
        <li>bread</li>
        <li>carrots</li>
        <li>beef</li>
        <li>pineapple</li>
        <li>tofu</li>
        <li>lettuce</li>
        <li>washing up liquid</li>
        <li>yoghurt</li>
        <li>chocolate</li>
        <li>milk</li>
        <li>bread</li>
</ul>
<div id="shopping_list_counter"></div>
</body>
</html>

Open in new window

0
 
vidhubalaAuthor Commented:
thanks, need to see all the pagenumbers at the same time like 1 2 3 ... 10.
0
 
prokvkCommented:
Well, I'm afraid that's way beyond this plugin .. This plugin allows you to display current page and provides the functionality you've seen ... Can't help you there
0
 
vidhubalaAuthor Commented:
thanks. will wait for some more answers before closing it.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now