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 wele .

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 wele .

• javascript
• jquery
• css
• twitter-bootstrap
• pagination

Share Improve this question Follow edited Mar 1, 2014 at 9:31 4m1nh4j1 asked Feb 28, 2014 at 17:07 4m1nh4j14m1nh4j1 4,3561616 gold badges6767 silver badges108108 bronze badges 1

• Have either of the answers addressed your issue? If not, could you be please elaborate on what you want to achieve? – Nick Grealy Commented Mar 4, 2014 at 3:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4 +25

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/nickg1/5ELfQ/2/

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

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.

What you can do is .prepend() a left li and .append() a right li:

$(document).ready(function () {
$('.nav').prepend('<li class="left"><a>Left</a></li>');
$('.nav').append('<li class="right"><a>Right</a></li>');
});

Although there has little browser patibility and styling issues in this solution. But I hope this will give you an idea to start.

My CSS:

.nav.nav-pills {
    width:auto;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
    position: relative;
    padding-right: 38px;
    display: inline-block;
}
.nav-pills > li {
    display: inline-block !important;
    float: none !important;
}
.nav-pills > li.last {
    position: absolute;
    right: 0;
}

As display:inline; is applied to .nav, so for centering use text-center class in wrapping div. i.e.

<div class="col-md-12 column text-center">

Apply jQuery for previous/next buttons and resizing issues.

$(document).ready(function () {
    $('.nav').prepend('<li><a href="#">&laquo;</a></li>');
    $('.nav').append('<li class="last"><a href="#">&raquo;</a></li>');

    var ulWidth = $('.nav').width();
    var screenWidth = document.body.clientWidth;
        if (screenWidth < ulWidth ){
            $('.nav').css('width', '100%');
        }

        $(window).resize(function(){
            screenWidth = document.body.clientWidth;
            screenWidth < ulWidth == true ?
            $('.nav').css('width', '100%') :
            $('.nav').css('width', 'auto');
        });
});