1. 程式人生 > >STU的分頁操作

STU的分頁操作

發的 mil page 實現 信息 輸入 操作 取值 情況

Ps:分頁的兩種思路

1,直接在數據庫端使用存儲過程,根據傳遞的頁碼,單頁數據條數來執行查詢,然後將數據傳回,顯示即可(我就是這種)

2,數據庫端將所有數據傳回,通過前端將數據進行分頁顯示

本來我是想按照老師發的那個分頁方法來實現的,數據庫和Servlet的代碼都能理解,可能我太菜了,然後看到前端有點懵逼,使用了JS/JQuery/Ajax來實現的,body部分基本無代碼,然後那個示例的命名規則和數據庫命名也看的一臉懵逼,零註釋,懵逼。所以我就用自己的想法重寫了一下,功能基本實現,代碼簡單容易理解,就是稍微有點瑕疵,下面會給你們說的。

一.數據庫端

因為對oracle比較熟悉,所以用了

oracle來執行分頁

Mysql的也很簡單,百度一下就行。

先編寫存儲過程

技術分享圖片

遊標

技術分享圖片

二.Dao.Mydb的修改

因為我們要從數據庫不僅僅取回數據,還要接受數據總條數和分頁的總頁數,還要發送四個參數,之前的代碼不夠我們使用了

增加一個getData()函數

代碼如下:

技術分享圖片

使用Map的好處就是可以將不同類型的對象全部保存在一起,方便入值和取值。

比如我們這個項目,通過Map可以一次性將總頁數,總條數,數據信息都取回來了。

三.Servlet的修改

在源代碼的基礎上修改即可,因為要進行分頁,所以之前的那種查詢方式,即select()函數我們就要拋棄不用了,再寫一個函數

代碼如下:

技術分享圖片

這個函數是當第一次打開時,展示第一頁的頁面,別問我為啥不通過request請求取回頁碼呢,因為頁面一加載就請求stu.action然後switch定位到當前這個函數,根本無法取回pageNum啊,可能你們又要問了,加載的時候發送一個唄,對不起,我試了好幾個方法都沒成功,除非你手動在地址欄把頁碼參數輸入,為了想如何解決這個問題,想了一個下午,楞是沒解決,主要是太菜了,肯定是有辦法解決的。

然後我就只能把第一頁顯示,只要進了第一頁,我就能通過超鏈接或者表單傳遞參數了。

所以我們還得再寫一個函數,用來接收頁碼參數,然後執行查詢等操作

代碼如下:

技術分享圖片

註釋我就不寫了,和上面那個函數一樣,就是

pageNum改成通過request請求取回,取回的是String通過Integer包裝類的parsInt轉成int型即可

函數寫完後,再去修改一下Swith的判斷

技術分享圖片

就是將select和默認全部指向selectindex函數,也就是第一頁展示函數

然後再新建一個分支,用來執行selectpage函數,也就是查詢其他頁的數據信息。

四.前端接入

技術分享圖片

在你們數據展示表格下面,加上這兩個DIV,不用添加內容,內容的添加,通過JS動態實現,主需要給兩個DIV加上ID即可

JS代碼如下:

技術分享圖片

如果按照步驟一步步走到這裏,基本你的功能都已經實現了

效果如圖:

技術分享圖片

說一下幾個瑕疵吧,我還沒有去實現的幾個地方

  1. 數據量過大時,頁碼數會顯示的很多,正確的效果應該是始終只顯示5頁,當點擊到第4頁的時候,頁碼數會刷新成59。為了避免這個尷尬情況,我就增加了一個下拉框,這樣的話,無論多少頁都不怕了吧,23333。再威武一點,你們加一個輸入框,直接輸入頁碼,然後跳轉過去,美滋滋吧。
  2. 就是過濾器這裏,因為我們的selectindexselectpage函數是放在stu.action裏執行,因此你只要翻頁,必然要進行stu.action的請求,所以你不登錄的話,想看分頁效果,洗洗睡吧,不太可能,也可能有其他方法是我太菜了不會寫那個判斷語句。

然後給你們提供一個曲線救國的方法,就是把這兩個函數丟進一個新的servlet裏面,然後XML裏面添加一下配置,然後過濾器裏給這個新servlet裏面的請求放行即可。

3.有問題,直接QQ滴滴我

STU的分頁操作