Bootstrap Pagination between navigation elements

Question

I tried different plugins like bootstrap-paginator and bootstrap-pagination-js to make pagination through dynamically generated <li> elements , so that they don't exceed one line.

The wanted result : One line of dates with next and previous buttons respectively in the right and in the left .

The plugins that I've tried have not been useful to me .

My code looks like this:

<div class="row">
    <div class="col-md-12 column">      
        <ul class="nav nav-pills center-pills text-center">         
            <li class="active">
                <a href="#">
                <span class="text-center badge pull-right span-list">1</span>
                1 Mars
                </a>
            </li>
            <li class=""><a href="#">2 Mars</a></li>
            <li class=""><a href="#">3 Mars</a></li>
            <li class=""><a href="#">4 Mars</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
        </ul>       
    </div>
</div>

The code fiddle .

Your suggestions will be very welcome .

Answer 1

Are you having a problem with styling? If so...

I've set the row height to fixed, and made overflow hidden, so that you get just one row of buttons.

.row{overflow:hidden;height:42px;}

I've added a prev and next button, and made them float left and right respectively. I hope this doesn't violate your pagination framework. Please let me know if you want an example of how to programmatically add these elements.

HTML

<li class="next"><a href="#">Next</a></li>
<li class="prev"><a href="#">Previous</a></li>

CSS

li.next{float:right;}
li.prev{float:left;}

I believe this gives the desired result... please let me know if I've missed your intention.

Disclaimer: I've only tested this in Opera 19.0. I don't have access to Firefox/Chrome/IE at the moment.

Example: http://jsfiddle.net/nickg1/5ELfQ/2/

Updated: Updated to remove horizontal scrollbar. - http://jsfiddle.net/nickg1/5ELfQ/3/

Answer 2

I have had success with Bootstrap pagination. If you are generating too many elements to fit in your desired space, you need to either figure out a way to generate less or use css to limit the size of your pagination space and "cut off" the overflowing elements.