前端分頁插件twbsPagination的使用

1.引入jquery與twbsPagination

引入js

2.引入div,展示分頁效果

        <%--分頁--%>
        <span style="font-size:14px;">
            <div class="text-center">
                <ul id="pagination-demo" class="pagination-sm"></ul>
            </div>
        </span>
div效果展示

3.script中引入函數(shù)

        //分頁
        $('#pagination-demo').twbsPagination({
            //total總記錄數(shù),就是多少條數(shù)據(jù)  pages總頁數(shù)
            totalPages: ${page.total},
            visiblePages: 5,
            first:'首頁',
            last:'末頁',
            prev:'上一頁',
            next:'下一頁',
            href:"?p={{number}}"
        });

最終才會展示這種效果:


page.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進階之旅閱讀 115,556評論 24 450
  • <a name='html'>HTML</a> Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,827評論 1 19
  • 請參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,764評論 2 19
  • 破碎再重組,能看到原本隱藏的意象。 零 我告訴別人我叫零,不是玲,在他們詫異的眼光中我只是微微一笑。因為零無所謂開...
    若水無心一閱讀 471評論 0 2
  • “每個女人都應(yīng)該有一間書房。關(guān)上門,洗凈雙手,打開一本書,閱讀?!薄烫飼?一直想說一句話,書真是個好東西。 ...
    紅子Jane閱讀 528評論 4 3

友情鏈接更多精彩內(nèi)容