文章的內容是使用bootstrap-paginator進行分頁,使用ajax獲取后臺數據、渲染。1.版本說明bootstrap3.3.2bootstrap-paginatorv1.0github2.準備工程建立動態web工程,新建index.html頁面,引入bootstrap相關cssjs文件。3.簡單顯示在需要顯示分頁的位置添加ul標簽:
在頁面底部添加js代碼:啟動web服務,訪問index.html頁面,可以看到分頁顯示。4.后臺準備數據建立一個servlet,負責向前臺輸出json數據。PrintWriterout=response.getWriter();Strings1="[{\"name\":\"lilei\"},{\"name\":\"lilei2\"}]";Strings2="{\"name\":\"hanmeimei\"}";Strings3="{\"name\":\"jim\"}";Strings4="{\"name\":\"jim1\"}";Strings5="{\"name\":\"jim2\"}";Stringpage=request.getParameter("page");Stringcur=null;switch(page){case"1":cur=s1;break;case"2":cur=s2;break;case"3":cur=s3;break;case"4":cur=s4;break;case"5":cur=s5;break;default:break;}out.print(cur);out.close();5.前臺展示數據前臺需要先獲取記錄的總條數和每頁容量。其中pageSize設置為2,先用post方法獲取totalPages,用來初始化分頁插件。運行程序即可。詳細的可以參見bootstrap-paginator說明,或者去bootstrap-paginatorgithub查閱。工程下載bootstrap-paginator.zipjdk1.8tomcat8網站導航
- zblogPHP模板zbpkf
- zblog免費模板zblogfree
- zblog模板學習zblogxuexi
- zblogPHP仿站zbpfang