The style can be customized, the call is simple, look directly at the example, the effect of the figure is as follows:
- <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
- <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
- <title>ajax Paging </title>
- <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;p adding: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;p adding:0 3px;}
- </style>
- <div id= "Pagenav" ></div>
- </body>
- <script>
- Testpage (1);
- function Testpage (curpage) {
- Supage (' Pagenav ', ' testpage ', ', ', curpage,100,5);
- }
- /**
- * @param {String} divname the DOM object ID rendered to the pager
- * @param {String} funname click the page number to perform the JS function of background query data
- * @param {Object} params the parameters of the background query data function, the order of the parameters is the sequence of the object, the current page must be set in the
- * The total number of records returned by the @param {String} sum background
- * @param {Boolean} pageSize the number of records displayed per page, default is 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;
- To parse out the parameters from the Parameter object
- 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);
- }
- Set Start Page number
- 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;
- }
- Home control
- if (curpage>1) {
- Output + = ' <a href= ' javascript: ' +funname+ ' (' + param_str + ' 1); "title=" first page "class=" Page-first ">«</a>";
- }
- Else
- {
- Output + = ' <span class= ' page-disabled ' >«</span> ';
- }
- Previous Page Menu control
- if (curpage>1) {
- Output + = ' <a href= ' javascript: ' +funname+ ' (' + Param_str + (curPage-1) + '); "title=" previous page class= "Page-previous" >‹ </a> ';
- }
- else{
- Output + = ' <span class= ' page-disabled ' >‹</span> ';
- }
- Page number Show
- for (i = start; I <= end; i++) {
- if (i = = Curpage) {
- Output + = ' <a href= ' javascript:; "class=" page-cur "> ' + curpage + ' </a>";
- }
- else {
- Output + = ' <a href= ' javascript: ' +funname+ ' (' + param_str + i + '); > ' + i + ' </a> ';
- }
- }
- Next Page Menu control
- if (totalpage>1 && curpage<totalpage) {
- Output + = ' <a title= ' next page "href=" javascript: ' +funname+ ' (' +param_str + (curpage+1) + '); "class=" Page-next ">›</a" > ';
- }
- else{
- Output + = ' <span class= ' page-disabled ' >›</span> ';
- }
- Last Page control
- if (curpage<totalpage) {
- Output + = ' <a title= ' last page ' href= ' javascript: ' +funname+ ' (' +param_str + totalpage+ '); "class=" Page-end ">»</a" > ';
- }
- else{
- Output + = ' <span class= ' page-disabled ' >»</span> ';
- }
- Output + = ' </div> ';
- Render to Dom
- document.getElementById (divid). InnerHTML = output;
- };
- </script>
