非常简单的JS分页效果
来源：互联网 发布：javascript设计模式 书 编辑：程序博客网 时间：2024/05/05 13:57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test js</title> </head> <style>.page_num{width: 30px;height: 10px;padding: 5px;border: 2px solid #CCCCCC;}.page_wrapper{margin-top: 20px;}.current_page{background: #CCCCCC;}</style><body> <div > <table width="200" border="1" id="store"> <tr bgcolor="#CCCCCC"> <td>name</td> <td> </td> <td> </td> </tr> <td>good</td> <td> </td> <td> </td> </tr> <tr> <td>better</td> <td> </td> <td> </td> </tr> <tr> <td>best</td> <td> </td> <td> </td> </tr> <tr> <td>bad</td> <td> </td> <td> </td> </tr> <tr> <td>worse</td> <td> </td> <td> </td> </tr> <tr> <td>worst</td> <td> </td> <td> </td> </tr> </tr> <td>good</td> <td> </td> <td> </td> </tr> <tr> <td>better</td> <td> </td> <td> </td> </tr> <tr> <td>best</td> <td> </td> <td> </td> </tr> <tr> <td>bad</td> <td> </td> <td> </td> </tr> <tr> <td>worse</td> <td> </td> <td> </td> </tr> <tr> <td>worst</td> <td> </td> <td> </td> </tr></table> <div id="store_page" class="page_wrapper"></div> </body><script type="text/javascript">var option = {"hastitle": true,//has title or not"num": 5,//list row number"id": "store",//the table's id"page_id": "store_page"//the number page wrapper};var storeId = document.getElementById(option.id);//get the tablevar rowsLength = storeId.rows.length;// the table all row lengthvar current_page = 1;// the default pagevar page_num = option.num;var searchText = [];//store all rowsvar n = 0;var titleHtml = "";//store the title row's html ,if it hasif(option.hastitle){//has title, leave out the title rowtitleHtml = storeId.rows[0].outerHTML;for(var i=1;i<rowsLength;i++){searchText[n] = storeId.rows[i].outerHTMLn++;}}else{for(var i=0;i<rowsLength;i++){searchText[n] = storeId.rows[i].outerHTMLn++;}}//begin the default showchangePage(current_page);//change the page numfunction changePage(current_page){changeContent(current_page);var page_store = document.getElementById(option.page_id);page_store.innerHTML = "";for(var p=1;p<=Math.ceil(searchText.length/page_num);p++){//put the onclick event into the num blockif(current_page == p){page_store.innerHTML += "<span class='page_num current_page' onclick='changePage(this.innerHTML)'>"+ p +"</span>";}else{page_store.innerHTML += "<span class='page_num' onclick='changePage(this.innerHTML)'>"+ p +"</span>";}}}//turn the page to select pagefunction changeContent(current_page){var c_html = '';var c_page_sum = (current_page*page_num)>searchText.length ? searchText.length : (current_page*page_num);for(var m=((current_page-1)*page_num);m<c_page_sum;m++){c_html += searchText[m];}var storeId = document.getElementById(option.id);storeId.innerHTML = ""storeId.innerHTML = titleHtml+c_html;} </script></html>
