完美實(shí)現(xiàn)bootstrap分頁(yè)查詢(xún)_javascript技巧

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:46:56

完美實(shí)現(xiàn)bootstrap分頁(yè)查詢(xún)_javascript技巧

完美實(shí)現(xiàn)bootstrap分頁(yè)查詢(xún)_javascript技巧:最近，開(kāi)始我們的Java項(xiàng)目，要求盡量使用bootstrap，因?yàn)樗萫asyUI要好看的多。然后就開(kāi)始上網(wǎng)查，邊查邊做，雖然我們引入了一些bootstrap的樣式，但是并沒(méi)有js代碼，所有的功能都需要自己用js做。其實(shí)并不難，只要我們明白分頁(yè)的實(shí)質(zhì)就行。說(shuō)了這么多，就讓

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀完美實(shí)現(xiàn)bootstrap分頁(yè)查詢(xún)_javascript技巧:最近，開(kāi)始我們的Java項(xiàng)目，要求盡量使用bootstrap，因?yàn)樗萫asyUI要好看的多。然后就開(kāi)始上網(wǎng)查，邊查邊做，雖然我們引入了一些bootstrap的樣式，但是并沒(méi)有js代碼，所有的功能都需要自己用js做。其實(shí)并不難，只要我們明白分頁(yè)的實(shí)質(zhì)就行。說(shuō)了這么多，就讓

最近，開(kāi)始我們的Java項(xiàng)目，要求盡量使用bootstrap，因?yàn)樗萫asyUI要好看的多。然后就開(kāi)始上網(wǎng)查，邊查邊做，雖然我們引入了一些bootstrap的樣式，但是并沒(méi)有js代碼，所有的功能都需要自己用js做。其實(shí)并不難，只要我們明白分頁(yè)的實(shí)質(zhì)就行。說(shuō)了這么多，就讓我們看看分頁(yè)查詢(xún)的表格是怎么做出來(lái)的吧。
先上效果圖：

1、引入的css樣式
我們需要引入bootstrap自帶的表格樣式，這樣比較好看，如果再需要修改的話，我們就在其基礎(chǔ)上再改。

2、需要的HTML文本
這里需要注意的是，每一個(gè)標(biāo)簽的id和class名字不要亂改，因?yàn)樗鼘?duì)應(yīng)著一些js代碼和css樣式。如果沒(méi)有顯示出效果，或者顯示的效果不是自己想要的，我們可以適當(dāng)進(jìn)行微調(diào)。


學(xué)生違紀(jì)信息
<%-- <%@ include file="/common.jsp"%> --%>

<%@ include file="/bootstrap.jsp"%>



 
 
 
 
 
 
 
 　　 
 
 
 
 

 
 
 
 
 學(xué)生違紀(jì)信息
 
 
 學(xué)號(hào)
 姓名
 考試科目
 考場(chǎng)號(hào)
 班級(jí)
 監(jiān)考人員
 
 
 
 
 
 
 

 
 
 
 
 
 
 每頁(yè)
 
 條記錄
 
 
 
 
 
 顯示第 1 至 10 項(xiàng)記錄，共 57 項(xiàng)
 
 
 
 
 
 ← 上一頁(yè)
 
 
 
 下一頁(yè) →

3、相應(yīng)的js代碼
這里包含了模糊查詢(xún)事件，回車(chē)事件，上一步，下一步，選擇頁(yè)，選擇每頁(yè)顯示條數(shù)等常用功能，后期再補(bǔ)充排序和選擇列的顯示和隱藏等。

經(jīng)過(guò)這些天的努力，實(shí)現(xiàn)了最基本的分頁(yè)查詢(xún)功能，還包括上一頁(yè)、下一頁(yè)以及選擇跳頁(yè)的效果，而且可以進(jìn)行模糊查詢(xún)，而且如果記錄小于5條就不會(huì)產(chǎn)生分頁(yè)等。后期再加上排序，選擇列的顯示和影藏就更好了。我們需要做的還很多，只要我們努力，就一定能夠做到。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com