Question

I'm using a CMS where I enter in a tag ({tag_pagination}) and it renders a functioning pagination link.

The only problem is it does it sloppy by not creating them using a list element and for the Active link, it just renders in plain text, no HTML at all.

It renders as such :

<span class="pagination" id="pagination">
   1  
   <a href="/subcat?Page=2&Items=12">2</a>
   <a href="/subcat?Page=3&Items=12">3</a>
   <a href="/subcat?Page=4&Items=12">4</a>
   <a href="/subcat?Page=5&Items=12">5</a>
   <!-- (...) -->
   <a href="/subcat?Page=7&Items=12">7</a>
</span>
<a href="/subcat?Page=2&Items=12">
    <i class="icon icon-arrow-next"></i>
</a>

Is there a way I can have this changed to proper Bootstrap pagination?

Answer 1

您可以将自定义CSS添加到类分页或向其添加现有的引导类。

http://www.w3schools.com/bootstrap/bootstrap_pagination.asp显示了使用bootstrap时的外观。

如果您使用jQuery，则可以使用ul。

替换带有id分页的span

Answer 2

我认为这可以帮助您获得解决方案

$('#pagination').replaceWith(function() {
    return $('<ul />', {
        html: this.innerHTML,
        id: 'pagination',
        class: 'pagination'
    });
});
$('#pagination').contents().filter(function(){return this.nodeType === 3}).wrap('<a/>');
$('ul#pagination a').each(function(){
    var ele = $(this);
    var ahref = (typeof ele.attr('href') === 'undefined')?'#':ele.attr('href');
    var atext = ele.html();
    ele.replaceWith('<li><a href="'+ ahref +'">'+ atext +'</a></li>');
});

但是，如果可能的话，我仍然会使用ul-li来修改你的标签（{tag_pagination}）。希望这有助于解决您的问题。

将<li>附加到所有<a> links under </a> <ul> <a>

2 个答案: