|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
建议大家买一本书,而不光是在网上看一些零碎的资料,一本书毕竟会讲的系统一些,全面一些,而且印刷的书不受电脑的限制,但是建议在看书的时候最好旁边有电脑,这样可以很及时地上机实践。
款式可以自界说,挪用复杂,直接看实例了,后果图以下:
- <!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>ajax分页</title>
- </head>
-
- <body>
- <style>
- .pagination {font-family: Tahoma;font-size: 12px;height: 22px;margin: 5px 10px;text-align: right;}
- .pagination a,.page-cur,.page-start,.page-end,.page-disabled,.page-skip {
- height:22px;line-height:22px;margin:0 3px 0 0;text-align:center;vertical-align:middle;white-space:nowrap;}
- .pagination input {border-width: 1px;}
- .page-start, .pagination a, .page-end, .page-disabled {border: 1px solid #CCCCCC;padding: 0 5px;}
- .pagination a {text-decoration: none;}
- .page-cur {background-color: #FFEDE1;border: 1px solid #FD6D01;color: #FD6D01;font-weight: 700;padding: 0 5px;}
- .page-disabled {color: #CCCCCC;}
- .page-skip {color: #666666;padding: 0 3px;}
- </style>
- <div id="pageNav"></div>
- </body>
-
- </html>
- <script>
- testPage(1);
- function testPage(curPage){
-
- supage('pageNav','testPage','',curPage,100,5);
-
- }
-
-
- /**
-
- * @param {String} divName 分页导航衬着到的dom对象ID
- * @param {String} funName 点击页码需求履行后台查询数据的JS函数
- * @param {Object} params 后台查询数据函数的参数,参数按次就是该对象的按次,以后页面必定要设置在外面的
- * @param {String} total 后台前往的总纪录数
- * @param {Boolean} pageSize 每页显示的纪录数,默许是10
- */
- function supage(divId, funName, params, curPage, total, pageSize){
- var output = '<div class="pagination">';
- var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10;
- if(parseInt(total) == 0 parseInt(total) == 'NaN') return;
- var totalPage = Math.ceil(total/pageSize);
- var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1;
-
- //从参数对象中解析出来各个参数
- var param_str = '';
- if(typeof params == 'object'){
- for(o in params){
- if(typeof params[o] == 'string'){
- param_str += '\'' + params[o] + '\',';
- }
- else{
- param_str += params[o] + ',';
- }
- }
- //alert(111);
- }
- //设置肇端页码
- if (totalPage > 10) {
- if ((curPage - 5) > 0 && curPage < totalPage - 5) {
- var start = curPage - 5;
- var end = curPage + 5;
- }
- else if (curPage >= (totalPage - 5)) {
- var start = totalPage - 10;
- var end = totalPage;
- }
- else {
- var start = 1;
- var end = 10;
- }
- }
- else {
- var start = 1;
- var end = totalPage;
- }
-
- //首页掌握
- if(curPage>1){
- output += '<a href="javascript:'+funName+'(' + param_str + '1);" title="第一页" class="page-first">
|
|