Foros del Web » Programando para Internet » Jquery »

Paginación AJAX Jquery y CodeInigter

Estas en el tema de Paginación AJAX Jquery y CodeInigter en el foro de Jquery en Foros del Web. Hola amigos, Necesito implementar paginación con ajax y jquery para actualizar sole el div en el cual se cargan las páginas, la cuestión es que ...
  #1 (permalink)  
Antiguo 20/03/2012, 19:04
 
Fecha de Ingreso: diciembre-2006
Mensajes: 213
Antigüedad: 17 años, 4 meses
Puntos: 3
Paginación AJAX Jquery y CodeInigter

Hola amigos,


Necesito implementar paginación con ajax y jquery para actualizar sole el div
en el cual se cargan las páginas, la cuestión es que también estoy usando
CodeIniter. Para ello estoy usando jPaginate, lo que no logro hacer es que cuando
doy clic en el número de página se carguen solamente las páginas no toda la pagina html (que dicho sea de paso hace la llamada al controlador y hace que en el div donde van las preguntas se recargue toda la página principal del sitio).

Esto es lo que tengo:

preguntas.css

Código CSS:
Ver original
  1. #preguntas {
  2.     width:500px;
  3. }
  4.  
  5. .pagination {
  6.     list-style:none;
  7.     margin:10px 0px 0px 0px;
  8.     padding:0px; clear:both;
  9. }
  10.  
  11. .pagination li{
  12.     float:left;
  13.     margin:3px;
  14. }
  15.  
  16. .pagination li a{
  17.     background-color:#44b0dd;
  18.     color:#fff;
  19.     display:block;
  20.     padding:3px 5px;   
  21.     text-decoration:none;
  22. }
  23.  
  24. .pagination li a.active {
  25.     background-color:#fff;
  26.     border:1px solid #000;
  27.     color:#000;
  28. }
  29.  
  30. .pagination li a.inactive {
  31.     background-color:#eee;
  32.     border:1px solid #ccc;
  33.     color:#777;
  34. }

Documento de paginación:


Código HTML:
Ver original
  1. <script src="jPaginate.js" type="text/javascript" charset="utf-8"></script>
  2. <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
  3. <link rel="stylesheet" href="preguntas.css" type="text/css" media="screen" />
  4. $(document).ready(function(){
  5.     $("#preguntas").jPaginate();                      
  6. });
  7. <div id="preguntas">  
  8.     <p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
  9.     <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>  
  10.     <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p>  
  11.     <p>Pellentesque ac sem ac sem tincidunt euismod.</p>  
  12.     <p>2Duis hendrerit purus vitae nibh tincidunt bibendum.</p>  
  13.     <p>Nullam in nisi si  ipsum m in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  im in nisi si  i dolor sit amet, consectetur adipiscin  ipsum dolor sit amet, consectetur adipiscin  ipsum dolor sit amet, consectetur adipiscin ipsum dolor sit amet, consectetur adipiscin ipsum dolor sit amet, consectetur adipiscint amet velit placerat laoreet.</p>    
  14.     <p>Nulla sed purus et tellus convallis scelerisque.</p>  
  15.     <p>Nam at justo ut ante consectetur faucibus.</p>  
  16.     <p>Proin dapibus nisi a quam interdum lobortis.</p>  
  17.     <p>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</p>  
  18.     <p>Mauris auctor suscipit tellus, at sodales nisi blandit sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet mollis mauris eget dictum. Ut blandit ipsum eget libero gravida egestas sit amet eu lacus. Vivamus vulputate egestas faucibus. Suspendisse imperdiet nisl vel purus suscipit placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed orci dolor. Nunc vitae nisl in sapien sollicitudin porttitor. Vivamus orci felis, rhoncus in sollicitudin vitae, congue eget ante. Curabitur eget elementum massa. Nunc porta fermentum ante, et venenatis tortor placerat nec. Aenean molestie ornare blandit. Fusce condimentum tempus massa, auctor pretium arcu facilisis vitae. Pellentesque faucibus scelerisque risus, id consectetur risus porttitor in.
  19.  
  20. Vestibulum lacus ipsum, eleifend ac porttitor non, tincidunt quis orci. Cras diam est, interdum porta dignissim id, mattis at erat. Curabitur pretium porta nisi, eget semper enim rutrum a. Curabitur ornare molestie porttitor. Aliquam erat volutpat. Nulla non augue libero. Sed auctor hendrerit bibendum. Aenean volutpat tellus vitae urna lobortis sollicitudin. Donec cursus velit id sapien facilisis eget fringilla purus luctus. Sed imperdiet tristique justo, eu dictum libero rhoncus et. Aliquam in elit in sem dapibus consequat. Nullam euismod rhoncus nulla quis aliquet. Mauris quis eros tellus, quis condimentum arcu. In pretium ultrices felis, et volutpat massa adipiscing eget. Suspendisse eu tellus et magna rutrum gravida ut ut quam. Quisque mollis, diam sit amet rhoncus varius, nisl arcu gravida dui, id blandit ipsum tellus ut felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>  
  21. </div>


Lo que busco al final es que por medio de un formulario se registren las preguntas que conformarán una encuesta.
Y para no presentar todos los text en una sola página lo pienso presentar mediante paginación en el lado del cliente para de esta forma hacer un sólo submit

Si alguien tiene una idea mejor para lograr hacer esto se los voy agradecer mucho

El jpaginate lo ibtuve de acá: http://www.summarg.com/2011/paginaci...con-jpaginate/

Etiquetas: ajax, formulario, html, javascript, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:10.