开发者社区> lzhdim> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

用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重写一下。

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

相关文章
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
0 0
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
0 0
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
0 0
JS中实现或退出全屏
JS中实现或退出全屏
0 0
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
0 0
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
0 0
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
0 0
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
0 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
0 0
+关注
lzhdim
人在20岁以意志力著称,在30岁以智慧取胜,在40岁则靠的是理智的判断。 一个人只有时刻保持幸福快乐的感觉,才会使自己更加热爱生命,热爱生活。只有快乐,愉快的心情,才是创造力和人生动力的源泉;只有不断自己创造快乐,与自己快乐相处的人,才能远离痛苦与烦恼,才能拥有快乐的人生。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载