Jump to content
elcaiaimar

problem with pagination

Recommended Posts

Hello,

 

I'm doing a pagination to my table but I'm having a problem with elements position. Pagination works fine but elements are really very close, as you can see in the attached images. I've tried to change things but nothing happens.

 

Does anyone know how to solve it? I put my code below. Thank you very much!

 

CSS:

 

#page_navigation a{ padding:3px; border:1px solid gray; margin:2px; color:black; text-decoration:none}.active_page{ background:darkblue; color:white !important; width:100%;}

 

 

JS:

 

$(document).ready(function(){ //how much items per page to show var show_per_page = 5; //getting the amount of elements inside content div var number_of_items = $('.paginacion').children().size(); //calculate the number of pages we are going to have var number_of_pages = Math.ceil(number_of_items/show_per_page); //set the value of our hidden input fields $('#current_page').val(0); $('#show_per_page').val(show_per_page); //now when we got all we need for the navigation let's make it ' /* what are we going to have in the navigation? - link to previous page - links to specific pages - link to next page */ var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>'; var current_link = 0; while(number_of_pages > current_link){ navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>'; current_link++; } navigation_html += '<a class="next_link" href="javascript:next();">Next</a>'; $('#page_navigation').html(navigation_html); go_to_page(0); });function previous(){ new_page = parseInt($('#current_page').val()) - 1; //if there is an item before the current active link run the function if($('.active_page').prev('.page_link').length==true){ go_to_page(new_page); } }function next(){ new_page = parseInt($('#current_page').val()) + 1; //if there is an item after the current active link run the function if($('.active_page').next('.page_link').length==true){ go_to_page(new_page); } }function go_to_page(page_num){ //get the number of items shown per page var show_per_page = parseInt($('#show_per_page').val()); //get the element number where to start the slice from start_from = page_num * show_per_page; //get the element number where to end the slice end_on = start_from + show_per_page; //hide all children elements of content div, get specific items and show them $('.paginacion').children().css('display', 'none').slice(start_from, end_on).css('display', 'block'); /*get the page link that has longdesc attribute of the current page and add active_page class to it and remove that class from previously active page link*/ $('.page_link[longdesc= + page_num +]').addClass('active_page').siblings('.active_page').removeClass('active_page'); //update the current page input field $('#current_page').val(page_num);}

 

Template:

 

<!-- the input fields that will hold the variables we will use -->

<input type='hidden' id='current_page' /> <input type='hidden' id='show_per_page' />

 

<div id="tab1" class="tab active"> {% if results %} <table class="table table-hover" id="tabla_productos"> <thead> <tr> <th>Codpozo</th> <th>Coor X</th> <th>Coor Y</th> <th>Tipo</th> </tr> </thead> {% for p in results %} <tbody class="paginacion"> <tr id="tr{{p.id}}"> <td>{{ p.codpozo }}</td> <td>{{ p.coorx }}</td> <td>{{ p.coory }}</td> <td>{{ p.tipo }}</td> {% if user.is_authenticated and user.is_staff %} <td><a href="#myModal" role="button" class="btn btn-danger delete" data-toggle="modal" id="{{p.id}}" data-name="{{p.codpozo}}">Eliminar</a></td> {% endif %} </tr> </tbody> {% endfor %} </table> <div id='page_navigation'></div> {% else %} <h2>No existen pozos</h2> {% endif %} </div>

post-177979-0-78435600-1424275357_thumb.jpg

post-177979-0-09864800-1424275368_thumb.jpg

Share this post


Link to post
Share on other sites

Pagination works fine but elements are really very close, as you can see in the attached images. I've tried to change things but nothing happens.

If you're saying that the pagination links are too close to each other, then change the CSS that controls that.

Share this post


Link to post
Share on other sites

No, I mean that the values of the table elements are very close, not pagination links. I want to say that before putting JS code for pagination the table shows each value under its column, and after, all them are very close and only under one column (codpozo).

 

I'm having a look at the JS code and I've seen this:

 

/hide all children elements of content div, get specific items and show them $('.paginacion').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

 

Could be that? Its the only thing related with css in JS code.. I've tried to change it for another display but I don't know what display could fix it

 

Any ideas?

 

Thank you very much!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...