problem with pagination

[elcaiaimar]

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>

[justsomeguy]

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.

[elcaiaimar]

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!

[elcaiaimar]

I fix it! I put css('display', 'table-row'); and it looks well!