用javascript实现的分页控件-阿里云开发者社区

开发者社区> lzhdim> 正文

用javascript实现的分页控件

简介: 随着Ajax的应用越来越多,经常需要在前台去加载数据,这样可以减少页面加载的时间,同时也改善了用户的体验性,所以结合实际的项目需要我写了一个javascript的分页控件,用于绑定table,实现类似datagrid分页控件的功能。
+关注继续查看
  随着Ajax的应用越来越多,经常需要在前台去加载数据,这样可以减少页面加载的时间,同时也改善了用户的体验性,所以结合实际的项目需要我写了一个javascript的分页控件,用于绑定table,实现类似datagrid分页控件的功能。以下为调用Js分页控件的代码。

var rows;
var tab = document.getElementById("table1");//table对象
var _total=0;//数据总数
var pager;//分页对象

function page_load(){
 pager = new stowayPager();
 pager.setPageIndex(1);//当前索引页
 pager.setPageSize(6);//设置分页数
 initData();
 bindList(false);
}
function initData(){
 var data = .....;//data为Ajax返回的数据,这里就不详细说明。
 rows = data;
 _total = rows.length;
 if(_total == 0){
  displayNotFind();
  return;
 }
 pager.setTotal(_total);//设置数据总数
}
function bindList(){
 displaybinding();//为了增加界面友好性而添加的提示
 var count = pager.getPageIndex() * pager.getPageSize();
 for(i=count-pager.getPageSize();i<count;i++){
  var tr = tab.insertRow(tab.rows.length);//新增一行
  var td_id = tr.insertCell(0);//定义ID列
  var td_name = tr.insertCell(1);//定义Name列
  var td_city = tr.insertCell(2);//定义City列
  td_id.innerText=rows[i]["ID"];
  td_name.innerText=rows[i]["Name"];
  td_city.innerText=rows[i]["City"];
  
 }
 document.getElementById("div_pager").innerHTML=pager.bindPager();//我们加入一个ID为div_pager的div,将生成的分页代码返回给div_pager
}

//当用户点击分页码时会触发pageChangedEvent方法,目前此方法只对页面中含有一个Js分页控件有效,如果想含多个分页控件改动起来也很简单。
function pageChangedEvent(i){
 pager.setPageIndex(i);//设置当前页
 bindList();
}
//此方法主要是清空数据。
function deleteRows()
{
 while(tab.rows.length>0){
  tab.deleteRow(0);
 }
}

function displaybinding(){
 deleteRows();
 var tr = tab.insertRow(0);
 var td = tr.insertCell(0);
 td.colSpan=3;//table有几列则设置为几列
 td.align='center';
 td.innerText='正在读取数据,请稍候...';
 document.getElementById("div_pager").innerHTML="";
}
function displayNotFind(){
 deleteRows();
 var tr = tab.insertRow(0);
 var td = tr.insertCell(0);
 td.align='center';
 td.colSpan=3;
 td.innerHTML='没有任何记录';
 document.getElementById("div_pager").innerHTML="";
}

 

调用起来还是挺容易的,接下来就是实现此功能的分页js代码:

/*************created by Stoway*************
  Date:2007/4/5
  Blog:http://blog.csdn.net/stoway
  Mail:stoway#163.com (请将#换成@)
********************end********************/
stowayPager=function(){
 var _pageIndex=1;
 var _total=0;
 var _pageSize=10;
 this.bindPager=function(){
  if(_total<=_pageSize) return "";
  var pageCount=parseInt(_total/_pageSize);
  if(_total%_pageSize>0){
   pageCount+=1;
  }
  var startIndex=1;
  var endIndex=10;
  if(pageCount>10 && _pageIndex>6){
   startIndex=_pageIndex-5;
   endIndex=startIndex+9;
  }
  if(endIndex>pageCount){
    endIndex=pageCount;
    startIndex=endIndex-9;
    if(startIndex < 1) startIndex=1;
  }

  var strTemp='';
  var str='';
  if(_pageIndex>1){
   strTemp='<a href="javascript:pager_PageChanged(1)">首页</a>&nbsp;<a href="javascript:pager_PageChanged({0})">上一页</a>&nbsp;';
   strTemp=strTemp.replace("{0}",parseInt(_pageIndex)-1);
   str+=strTemp;
  }
  for(i=startIndex;i<=endIndex;i++){
   if(_pageIndex==i){
    str+= + i + '&nbsp;';
   }
   else{
    strTemp='<a href="javascript:pager_PageChanged({0})">[{1}]</a>&nbsp;';
    str+=strTemp.replace("{0}",i).replace("{1}",i);
   }
  }
  if(_pageIndex<pageCount){
   strTemp='<a href="javascript:pager_PageChanged({0})">下一页</a>&nbsp;<a href="javascript:pager_PageChanged({1})">末页</a>';
   strTemp=strTemp.replace("{0}",parseInt(_pageIndex)+1);
   strTemp=strTemp.replace("{1}",pageCount);
   str+=strTemp;
  }
  return str;
 }
 this.setPageIndex=function(i){
  _pageIndex=i;
 }
 this.getPageIndex=function(){
  return _pageIndex;
 }
 this.setPageSize=function(i){
  _pageSize=i;
 }
 this.getPageSize=function(){
  return _pageSize;
 }
 this.setTotal=function(i){
  _total = i;
 }
 this.getTotal=function(){
  return _total;
 }
}
function pager_PageChanged(pageIndex){
 if(typeof(pageChangedEvent) != "undefined"){
  pageChangedEvent(pageIndex);
 }
}


 原文链接:http://blog.csdn.net/stoway/archive/2007/04/06/1553745.aspx


该控件目前是js脚本实现,改天用jquery重写一下。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2508 0
【JAVA秒会技术之玩转高效分页】EasyUI + PageHelper实现分页
 EasyUI + PageHelper实现分页 一、EasyUI页面分页 页面逻辑:页面初始化时,通过jquery easyui的DataGrid(数据表格)的url属性异步加载,返回指定的json格式数据,在通过pagination属性,展示分页工具栏。   表现层分析: 请求URL:/XXX/list 请求参数:Integer page、Integer rows(ea
2238 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8943 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10538 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11328 0
MongoDB分页的Java实现和分页需求的思考
前言 传统关系数据库中都提供了基于row number的分页功能,切换MongoDB后,想要实现分页,则需要修改一下思路。 传统分页思路 假设一页大小为10条。则 //page 1 1-10 //page 2 11-20 //page 3 21-30 ... //page n 10*(n-1) +1 - 10*n MongoDB提供了skip()和limit()方法。
1313 0
+关注
lzhdim
人在20岁以意志力著称,在30岁以智慧取胜,在40岁则靠的是理智的判断。 一个人只有时刻保持幸福快乐的感觉,才会使自己更加热爱生命,热爱生活。只有快乐,愉快的心情,才是创造力和人生动力的源泉;只有不断自己创造快乐,与自己快乐相处的人,才能远离痛苦与烦恼,才能拥有快乐的人生。
522
文章
4
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载