js分页代码(jQuery)

文章标签:
2015-1-12 19:34:04     12 人阅读    

js代码:
注意在这里:_table_id, _content_div_id, _content_id, ucit_current_page_id, index
 jquery+ html分页效果
分页下面标签的一些参数:

<div id="table_page_logs_state_id">
 
<div id="table_logs_lxxsmd_lxsjzh_page_state_id" class="page" style="cursor:pointer">
</div>
 
_table_id : table_page_logs_state_id 的值。
_content_div_id:table_logs_lxxsmd_lxsjzh_page_state_id的值
_content_id: 最外层的值 persioncheckid_logs_manager_table_id
<div id="persioncheckid_logs_manager_id" style="">
12345
 
<table id="persioncheckid_logs_manager_table_id" class="stripe_tb" width="80%">
 
<div id="table_page_logs_state_id">
</div>
</div>
 
/* 分页组装 */
function onSxglBwcblLxxsmdCommonBuildPageState(currentPage, pageSize, total, _table_id, _content_div_id, _content_id, ucit_current_page_id, index) {
  
 //var _table_id = "table_lxxsmd_lxsjzh_page_state_id";
 //var _content_div_id = "table_page_state_id";
 /* 用正则去掉之前所有有该符号的东西 */
 
 _table_id  = _table_id.replace(/'/g, '');
 _content_div_id = _content_div_id.replace(/'/g, '');
 
 _content_id = _content_id.replace(/'/g, '');
 ucit_current_page_id = ucit_current_page_id.replace(/'/g, '');
 
 var _table_fh_id = "'" + _table_id + "'";
 var _content_fh_div_id = "'" + _content_div_id + "'";
 
 var _content_fh_id = "'" + _content_id + "'";
 var ucit_fh_current_page_id = "'" +  ucit_current_page_id + "'";
 
 
 jQuery("#" + _table_id).remove();
 
 
 
  var content_option = jQuery("#" + _content_div_id);
  
 
  /* 上一页的选择按键 */
  var page_pre = null;
  /* 下一页的选择按键 */
  var page_next = null;
  
  var midden = null;
  
  if(currentPage == 1) {
   
   var page_pre = new jQuery('<span onclick="onSxglBwcbllxxsmdNextPage(2, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" class="disabled" >上一页</span>');
  } else {
  
   var page_pre = new jQuery('<a onclick="onSxglBwcbllxxsmdNextPage(2, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" class="disabled" >上一页</a>');
  }
  
  if(currentPage == Math.ceil(total/pageSize)) {
   
   var page_next = new jQuery('<span onclick="onSxglBwcbllxxsmdNextPage(3, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" class="disabled" >下一页</span>');
  } else {
  
   var page_next = new jQuery('<a style="cursor:pointer" onclick="onSxglBwcbllxxsmdNextPage(3, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" >下一页</a>');
  }
  
  
  var page_div = null;
  
  /*
   if(jQuery("#lxsjzh_page_has_content_div_id").is(":hidden")){
         
    page_div = new jQuery("<div class='page' style='cursor:pointer' id= 'table_lxxsmd_lxsjzh_page_state_id' style='display:none;padding-top:10px;' ></div>");
     }else{
         
      page_div = new jQuery("<div class='page' style='cursor:pointer' id= 'table_lxxsmd_lxsjzh_page_state_id' style='padding-top:10px;' ></div>");
     }
     */
  page_div = new jQuery('<div class="page" style="cursor:pointer" id= "' + _table_id + '" style="padding-top:10px;" ></div>');
  
  var page_1 = new jQuery('<a style="cursor:pointer" onclick="onSxglBwcbllxxsmdNextPage(1, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" >1</a><l>.....</l>');
  
  page_pre.appendTo(page_div);
  
  if(currentPage == 1 || currentPage - 3 <= 0) {
  
  } else {
   page_1.appendTo(page_div);
  }
  
  /* 中间的页数选择 */
  if(currentPage-1 > 0) {
   
   var page = currentPage-1;
   
    var t_1 = new jQuery('<a style="cursor:pointer" onclick="onSxglBwcbllxxsmdNextPage(6, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" >' + page.toString() + '</a>');
        
    if(currentPage-2 > 0) {
     
     var page = currentPage-2;
    
     var t_2 = new jQuery('<a style="cursor:pointer" onclick="onSxglBwcbllxxsmdNextPage(5, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" >' + page.toString() + '</a>');
     t_2.appendTo(page_div);
    }
   
   t_1.appendTo(page_div);        
  }
  
  var current = new jQuery("<span class='current'>" + currentPage.toString() +"</span>");
  current.appendTo(page_div);
  
  
  /* 中间的页数选择 */
  if(currentPage+1 < Math.ceil(total/pageSize)) {
  
   var page = currentPage+1;
   
    var t_1 = new jQuery('<a style="cursor:pointer" onclick="onSxglBwcbllxxsmdNextPage(8, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" >' + page.toString() + '</a>');
    
     t_1.appendTo(page_div);
    
    if(currentPage+2 < Math.ceil(total/pageSize)) {
     
     var page = currentPage+2;
    
     var t_2 = new jQuery('<a style="cursor:pointer" onclick="onSxglBwcbllxxsmdNextPage(7, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" >' + page.toString() + '</a>');
     t_2.appendTo(page_div);
    }        
  }
  //var page_next = new jQuery("<a href='#' onclick='onNextPage(3)' >></span>");
  var page_end = null;
  if(total > 20) {
  
   page_end = new jQuery('<l>.....</l><a style="cursor:pointer" onclick="onSxglBwcbllxxsmdNextPage(4, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" >' + Math.ceil(total/pageSize) + '</a>');
  } else {
  
   page_end = new jQuery('<a style="cursor:pointer" onclick="onSxglBwcbllxxsmdNextPage(4, ' + currentPage + ', ' + pageSize + ', ' + total +', ' + _table_fh_id +', ' + _content_fh_div_id +', ' + _content_fh_id +', ' + ucit_fh_current_page_id +', ' + index + ')" >' + Math.ceil(total/pageSize) + '</a>');
  }
  
  if(currentPage == Math.ceil(total/pageSize) && currentPage + 3 >= Math.ceil(total/pageSize)) {
  
  } else {
   page_end.appendTo(page_div);
  }
  
  page_next.appendTo(page_div);
  
  var start_page_nummber = (currentPage-1)*10+1;
  
  var end_page_nummber = 0;
  if(currentPage*10 > total) {
  
   
   end_page_nummber = total;
  } else {
  
   end_page_nummber = (currentPage)*10;
  }
  
   
  /* 页脚 */
  var page_jls = new jQuery("<span style='float:right;'>当前记录数:" + start_page_nummber + "-" + end_page_nummber + " 总共记录数:" + total + "</span>");
  
  page_jls.appendTo(page_div);
  
  
  if(total > 10) { 
  
   page_div.appendTo(content_option);
  }
}
 
 
/* 分页程序的下一页显示 */
 function onSxglBwcbllxxsmdNextPage(key, currentPage, pageSize, total, _table_id, _content_div_id, _content_id, ucit_current_page_id, index) {
  
  _table_id  = _table_id.replace(/'/g, '');
  _content_div_id = _content_div_id.replace(/'/g, '');
 
  _content_id = _content_id.replace(/'/g, '');
  ucit_current_page_id = ucit_current_page_id.replace(/'/g, '');  
   
  jQuery("#" + _content_id ).empty();  
  
  var _content_fh_id = "'" + _content_id + "'";
  var ucit_fh_current_page_id = "'" +  ucit_current_page_id + "'";
  
  
  /* 下一页 */
  if(key == 3 && (currentPage*pageSize) < total) {
    
    if(key == 3 && currentPage - (total/pageSize) < 0) {
     
     currentPage = currentPage + 1;
    }
   } else if(key == 3 && currentPage - (total/pageSize) < 0) {
   
    //currentPage = currentPage + 1; 
   }
   
   /* 上一页 */
   if(key == 2 && (currentPage*pageSize) > pageSize) {
   
    currentPage = currentPage - 1;
   }
   
   /* 首页 */
   if(key == 1) {
   
    currentPage = 1;
   }
   
   /* 末页 */
   if(key == 4) {
   
    /* 0 js取整数 round 四舍五入  1. Math.ceil()用作向上取整。2. Math.floor()用作向下取整。 */
    currentPage = Math.ceil(total/pageSize);
   }
   
   if(key == 5) {
   
    currentPage = currentPage -2;
   }
   
   if(key == 6) {
   
    currentPage = currentPage -1;
   }
   
   if(key == 7) {
   
    currentPage = currentPage +2;
   }
   
   if(key == 8) {
   
    currentPage = currentPage +1;
   }
   
   /* 设置当前页数 */
   jQuery("#" + ucit_current_page_id).attr("title", currentPage);
   
   var ucit_persioncheckid_select_sqlx = "";
   if(jQuery("#ucit_persioncheckid_select_sqlx_id").val() ==  undefined)  {
   
   } else {
   
    ucit_persioncheckid_select_sqlx = jQuery("#ucit_persioncheckid_select_sqlx_id").val();
   }
   
   /* 审核状态 */
   if(index == 1) {   
   jQuery.ajax({
   url : themeDisplay.getPathMain() + '/portal/persionChectInfo',
   type : 'POST',
   data : {
    
    currentPage : currentPage,
    sxgl_lxzb_sxgl_pageSize : pageSize,
    department : ucit_persioncheckid_select_sqlx,
    sxgl_lxzb_sxgl_totalPage : total
   },
   success : function(data) {
 
     var base_content = jQuery("#" + _content_id);
 
     var json = eval(" (" + data + ") ");
     
     var portlets = json.portlets;
     var pageTotal = json.total;
     var department = json.department;
     
     
     
     var content = buildPersionCommonWindow(portlets, pageTotal, 2, currentPage, pageSize, department);
     onSxglBwcblLxxsmdCommonBuildPageState(currentPage, pageSize, pageTotal, _table_id, _content_div_id, _content_fh_id, ucit_fh_current_page_id, index);
     
   }});
   
   }
   
   
   /* 日志信息 */
   if(index == 2) {
   
    buildPersionLogsWindow(currentPage);
   }
 }
 
/* 日志表格构建 */ 
 function buildPersionLogsWindow(currentPage) {
 
  
  var  currentPageSize = 10;
 
  /* 提交修改 -- 处理状态后台修改 */
  jQuery.ajax({
     url : themeDisplay.getPathMain() + '/portal/persionLogsChectInfo',
     data : {
      
      currentPage: currentPage
     },
     success : function(data) {
      
      var json = eval(" (" + data + ") ");
      
      var portlets = json.portlets;
      var total = json.total;
      
      var content = jQuery("#persioncheckid_logs_manager_id");
      
      var table = new jQuery("<table width='80%' class='stripe_tb' id='persioncheckid_logs_manager_table_id'><tr><th>修改人</th><th>所在部门</th><th>电话号码</th><th>邮箱</th><th>照片</th><th>修改日期</th></tr></table>");
      /* 表格的元素封装 */
      for (var i = 0; i < portlets.length; i++) {
      
       var p = portlets[i];
       var tr = new jQuery('<tr><td>' + p.XGRXM + '</td><td>' + p.BM + '</td><td>' + p.XGQDHHM + '</td><td>' + p.XGQYX + '</td><td>' + p.XGQZP + '</td><td>' + p.XGSJ + '</td></tr>');
       tr.appendTo(table);
      }
      
      table.appendTo(content);
      
      var pageState = new jQuery("<div id='table_page_logs_state_id'></div>");
      
      pageState.appendTo(content);
      
      var _table_id = "table_logs_lxxsmd_lxsjzh_page_state_id"; //persioncheckid_logs_manager_table_id
      var _content_div_id = "table_page_logs_state_id";  //table_page_state_id下面一层的div
      
      var _content_fh_id = "persioncheckid_logs_manager_id";  //table_page_state_id最外层
      var ucit_fh_current_page_id = "ucit_logs_current_page_id";
      
      onSxglBwcblLxxsmdCommonBuildPageState(currentPage, currentPageSize, total, _table_id, _content_div_id, _content_fh_id, ucit_fh_current_page_id, 2);
     }
     
  });  
 }


原文地址:http://www.itmmd.com/201501/481.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

jQuery教程(14)-ajax操作之操作 JavaScript 对象   上一篇
下一篇  linux下oracle的安装

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!