MVC自定義分頁（附表跳轉頁Loading提示）

2022-01-21 20:25:55 字數 3185 閱讀 9728

之前我發表了一篇mvc無重新整理分頁的文章，裡面用的是mvcpager控制項，但是那個受那個控制項限制，傳值只能用pagedlist，各方面都受到了限制，自由度不夠高，現在還是做mvc無重新整理分頁，但是想直接用iqueryable或者ienumerable傳值，並且介面簡潔化，可定製性也高點。

既然還是用iqueryable傳值，那麼controller就沒什麼好說了，就是分頁的時候返回乙個partialview而已。現在關鍵是網頁的設計和指令碼。先說我想達到的效果吧：

我想達到的效果就是搜尋條件和標題佔一行，其中標題靠左，搜尋條件靠右，新增商品和分頁資訊佔另一行，其中新增商品按鈕靠左，分頁資訊靠右，**如下：

其中樣式row是bootstrap的樣式，left_head和right_head是我用來讓他們兩個分別浮動在左右的：

不過這只是樣式問題，都不是重點，重點在區域性頁面_pageinfo：

<


div 


id="pageinfo"


>


<


div><


input 


id="btnprevpage"


class


="btn btn-default"


type


="button"


value


/>


div>


<


div><


input 


id="btnnextpage"


class


="btn btn-default"


type


="button"


value


/>


div>


<


div><


input 


id="txtpageindex"


name


="pageindex"


type


="text"


class


="form-control"


/>


div>


<


div><


input 


id="btnjump"


class


="btn btn-default"


type


="button"


value


="跳轉"


/>


div>


<


div 


id="pagenum"


><


span 


id="spanpageindex"


>


span


><


span


>/


span


><


span 


id="spantotalpage"


>


span


>


div>


div>
可以看到分頁控制項各節點之間是有一定間距的，並且分頁數字是靠下的，這些的樣式如下：

#txtpageindex #pageinfo > div #pagenum
樣子已經做好了，現在就缺關鍵的指令碼了，點了頁面跳轉可得跳轉頁面呀，繫結一下事件：

至於說其中的showwarn警告框是什麼呢，這個請參閱我的另一篇文章jquery彈出提示資訊簡潔版。

需要說明的是我的區域性重新整理分頁是這樣寫的：

表的區域性頁面indexpartial的後面得呼叫指令碼重新整理一下頁數：

可以看到其中用到了pagecontent分頁類，這個類在我的另一篇文章通用ef框架裡有介紹，這裡就不描述了。其中關鍵的就是呼叫的重新整理頁數方法：

function


refreshpage(pageindex, totalpage)  


else


else


else


}$("#spanpageindex").text(pageindex);


$("#spantotalpage").text(totalpage);


$('#txtpageindex').val(pageindex);


$('#pageinfo').show();}}
至此分頁控制項就寫好了。不過在表頁跳轉時最好還是提示一下正在載入中吧，要不然可能不知道頁面跳轉了呢，或者等待太久卻不知道還在等待呢。這樣的話就需要先放個遮罩層：

<


div 


id="loading"


>


<


img 


src="/content/img/imgloading.gif"


alt="載入中..."


/>


div>
一開始是要隱藏遮罩層的：

#loading #loading img
div的#loading就是乙個遮罩層，其中的loading圖在遮罩層的**顯示：

需要圖的直接儲存上面那個圖吧，這樣的話，在form提交post的時候把遮罩層拉出來擋一下，獲取到資料後又把他撤走就可以了：

function


loading() 


function


removeloading() 


$('#formquery').on('submit', loading);

displayTag自定義頁跳轉方法

網上找的方法，原理和原先的上頁下頁跳轉方式差不多，也是構造連線的方式 displaytag的配置檔案修改三個屬性如下 paging.banner.full 頁 跳轉 首頁 上頁 下頁 尾頁 paging.banner.first 頁 跳轉 首頁 上頁 下頁 尾頁 paging.banner.last...

MVC自定義錯誤頁404靜態頁

昨天公司要求給所有專案新增自定義404錯誤頁，具體的要求實現的有以下幾點 1.實現自定義錯誤 如各種error，404等 跳轉到指定的頁面 2.所指定的頁面輸出的http狀態值必須是404或其他指定的statecode 3.跳轉到的自定義錯誤頁面必須是.html字尾結尾 關於第一點，這個很簡單，大家...

mvc 母版頁 使用者自定義控制項

1.母版頁是與controller無關的，母版頁只是乙個view檔案，而沒有任何controller與之相對應。2.其實在asp.net mvc中view的aspx與母版頁並不像webform中那樣緊密關聯。例如我想更換乙個aspx的母版頁，只要在action中return 時指定所要使用的mast...