用javascript实现的分页控件
来源:互联网 发布:2016产业结构优化 编辑:程序博客网 时间:2024/06/15 14:17
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> <a href="javascript:pager_PageChanged({0})">上一页</a> ';
strTemp=strTemp.replace("{0}",parseInt(_pageIndex)-1);
str+=strTemp;
}
for(i=startIndex;i<=endIndex;i++){
if(_pageIndex==i){
str+= + i + ' ';
}
else{
strTemp='<a href="javascript:pager_PageChanged({0})">[{1}]</a> ';
str+=strTemp.replace("{0}",i).replace("{1}",i);
}
}
if(_pageIndex<pageCount){
strTemp='<a href="javascript:pager_PageChanged({0})">下一页</a> <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);
}
}
- 用javascript实现的分页控件
- 实现DataList控件的分页
- 实现DataList控件的分页
- Repeater控件的分页实现
- wpf分页控件的实现
- javascript分页效果的实现
- javaScript实现的前台分页
- JavaScript分页控件PagerView
- 用AspNetPager控件最详细的分页实现方法
- 自己写的实现分页的控件
- 如何实现Repeater控件的分页
- Repeater控件分页功能的实现
- 实现 DataList 或 Repeater 控件的分页
- GridView控件自定义分页的实现
- (jQuery)实现简单的分页控件
- 【原创】两种分页控件的实现
- angularjs实现的前端分页控件
- 一种简单分页控件的实现
- PB实例技巧
- Java开发工程师是怎样炼成的------按钮篇(Buttons)之二
- 程序员之道E文版学习笔记(1)
- ASP.NET抓取其他网页代码
- PHP的XML分析函数
- 用javascript实现的分页控件
- 入侵必学:SQL语句大全
- ActiveBPEL持久化(MySQL)
- 提升JSP页面响应速度的七大秘籍绝招
- 利用JS脚本Window.Open打开一个全屏的窗口
- 用代码控制Rave
- 昨天提车失败
- (MS SQL Server)SQL语句导入导出大全
- 调试小技巧