jq html 實現 分頁效果

2021-10-11 18:07:41 字數 2009 閱讀 1335

頁面容器

"pagenum"

>

div>

樣式

#pagenum

#pagenum div

#pagenum ._all_page_item_

._hidden_

._page_item_check

._all_page_number_

._jump_page_ ._jump_page_btn_

js內容劃重點:

dom:容器的id;

allpage:總頁數;

functionname:頁面改變的時候需要呼叫的 方法;

以下js是乙個單獨的 js 檔案

function

_creatpagingdom_

(dom,allpage,functionname)

else

if(i>5)

else

} itemlist +=

( itemdom +''

);if(math.

round

(allpage/5)

>1)

else

}else

;//改變

function

_changepaginglist_()

else

if(page <5)

dom.

find

("._previous_page_").

show()

;}else

if(page ==5)

else

if(page>

5&& page < allpage -5)

else

if( allpage - page >2)

_creatpagindom()

}else

if(page == allpage -2)

else

if(page == allpage -1)

else

}function

_creatpagindom()

function

_page_jump_()

else}$

(dom).on

("click"

,"._page_item_"

,function()

);$(dom).on

("click"

,"._previous_page_"

,function()

})$(dom).on

("click"

,"._next_page_"

,function()

})$(dom).on

("click"

,"._jump_page_"

,function()

)}

頁面中使用方法將上面的js**寫入單獨的js檔案,在頁面上引入就能使用了

function

getpagedata()

})}function

checkuser()

最後效果

AJAX實現分頁效果

本markdown編輯器使用stackedit修改而來,用它寫部落格,將會帶來全新的體驗哦 markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成格式豐富的html頁面。維基百科 使用簡單的符號標識不同的標題,將某些文字標記為粗體或者斜體,建立乙個鏈結等,詳細...

Extjs實現分頁效果

extjs實現分頁還是比較簡單的,主要是這套流程弄明白就可以了。extjs4.0以後版本適用 首先js檔案需要引入pagingmemoryproxy.js ext.loader.setconfig ext.loader.setpath ext.ux scripts extjs ux ext.requ...

vue element ui 實現分頁效果

我使用得是el table el pagination來實現的,話不多說,直接上 編輯刪除 export default inject reload 注入reload方法 data created mounted methods handlecurrentchange function curren...