12. 参考

Atitit.列表页面and条件查询的实现最佳实践(2)------翻页 分页 控件的实现java .net php

Atitit.列表页面and条件查询的实现最佳实践(2)------翻页 分页 控件的实现java .net php

 

1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1

2. 翻页的显示格式:: 1

2.1. 通常ui--“首页”、“上页”、“下页”、“末页”，还要有Goto到指定页 1

2.2. 百度式::...上一页567891011121314下一页 2

2.3. 综合的页面 首页”、“上页”、56789 “下页”、“末页”，还要有Goto到指定页 2

2.4.  2

3. 翻页器与数据源控件的交流数据.. 2

4. 分页/翻页的流程详细 2

4.1. :搜索框搜索按钮事件: 2

4.2. 翻页事件: 2

4.3. Jump事件... 2

5. 运行在服务端还是客户端控件?? 3

6. 数据源内部获得翻页数据运行在服务端还是客户端?? 3

7. 翻页控件选型::easyui 3

8. 翻页控件的扩展点and 调用点 3

9. 容器注射DI,IOC绑定搜索控件and翻页控件and数据源and表格控件. 3

10. 数据源计算总记录的方法:::子能sql count()... 3

11. #---code 4

12. 参考 7

 

1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件..

 

 

2. 翻页的显示格式::

2.1. 通常ui--“首页”、“上页”、“下页”、“末页”，还要有Goto到指定页

 

“首页”、“上页”、“下页”、“末页”，还要有Goto到指定页等等

当前页/总页数   总条数   指定pagesize选择器 

 

2.2.  百度式::...

2.3. 综合的页面 首页”、“上页”、56789 “下页”、“末页”，还要有Goto到指定页

2.4.  

优缺点::

 

 

3. 翻页器与数据源控件的交流数据..

翻页器 pre ,next页面事件,,,会传出数据::::   pagesize,page...

数据源会返回数据::    rows(记录总数) ,  datalist..(当前页的数据)

4. 分页/翻页的流程详细

4.1. :搜索框搜索按钮事件:

 获得搜索框参数>>传给翻页器>>指定翻页器当前页面为1>>> 翻页器执行查询>>数据源>》》获得显示数据绑定显示在表格控件中...>>按照返回的记录计算翻页器的总页数...>>翻页器设置嘎自的 首页”、“上页”为禁用状态..

或者

 搜索框控件获得参数>>直接执行查询pagesize,page=1>>数据源>》》获得显示数据绑定显示在表格控件中...>>按照返回的记录计算翻页器的总页数.>>>指定翻页器当前页面为1>>翻页器设置嘎自的 首页”、“上页”为禁用状态..

 

 

4.2. 翻页事件:

翻页器计算(+-或者goto 第一的页or最后的页面) 要使用的页数>>执行从 搜索框控件获得参数>>参数传给数据源控件>>>返回翻页数据..>>绑定显示在表格控件中..>>>按照返回的记录计算翻页器的总页数>>>>翻页器设置嘎自的 首页”、“上页”“下页”、“末页”为禁用状态..

 

4.3. Jump事件...

5. 运行在服务端还是客户端控件??

从兼容性考虑, 翻页控件还是运行在客户端更好...java .net php都能使用....

 

6. 数据源内部获得翻页数据运行在服务端还是客户端??

从开发效率想,  少量数据可以在客户端数据源内部获得...

7. 翻页控件选型::easyui

客户端easyui 推荐,,,...Ligerui的根本马独立的翻页控件

服务端:: 倒霉,几乎马知名的分页控件,只好嘎自写兰..

aspnetpager

8. 翻页控件的扩展点and 调用点

扩展点:::一个接口,用来调用外部控件...

var onSelectPage= function(pageNumber, pageSize){

//$('#content').panel('refresh', 'show_content.php?page='+pageNumber);

  query();

}

调用点:::外部控件可以调用的翻页控件方法..

 resetPageTo1()

 

 

9. 容器注射DI,IOC绑定搜索控件and翻页控件and数据源and表格控件.

10. 数据源计算总记录的方法:::子能sql count()...

或者使用server 翻页而不是数据库翻页..

11. #---code

Line 3: var onSelectPage= function(pageNumber, pageSize){

Line 10: //function pageIni(info)

Line 27: function setPageInfo(info)

Line 53: function resetPageTo1()

Line 59:    function setBtnDisabled()

Line 78: function nextPage()

Line 85: function firstPage()

Line 93: function lastPage()

Line 102: function prePage()

Line 114: function  setNextPageInfoNPaging(nextPage)

Line 121: function page_go()

 

 

#------------------detail

 

// JavaScript Document

//todox  ini pageInfoStyle pagesize and bind SelectPageevent===query..

var onSelectPage= function(pageNumber, pageSize){

//$('#content').panel('refresh', 'show_content.php?page='+pageNumber);

  query();

}

 

//=========================================

  

//function pageIni(info)

//{

////{

////    total:2000,

////    pageSize:10

////    }

//var total=info.total;

//var pageSize=info.pageSize;

//$("#totalPages").html(total/pageSize);

//$("#totalRows").html(total);

////if(info.pageNumber==null)

////if($("#page").val()=="")

////$("#page").val(1);

//}

// setPageInfo({"total":data.total,"pageSize":7});

 

var pageCtrlId="page_page";

function setPageInfo(info)

{

//{pageSize

//    total:2000,

//   

//    }

var total=info.total;

 var pageSize=$("#pagesize").val();

$("#totalPages").html(Math.ceil(total/pageSize));

 

//fix page err

try{

var curPage= parseInt(  $("#"+pageCtrlId).val(),10);

var  totalPageShow= parseInt($("#totalPages").text(),10);

if(curPage>totalPageShow)

{

//setNextPageInfoNPaging(1);

}

}catch(e){}

 

 

$("#totalRows").html(total);

//if(info.pageNumber==null)

 setBtnDisabled()

}

 

function resetPageTo1()

{

 $("#"+pageCtrlId).val(1);

 $("#page_page_lab").html(1);

}

 

   function setBtnDisabled()

   {

var curPage= parseInt(  $("#"+pageCtrlId).val(),10);

$("#nextLastPageBtnArea").show();

$("#firstPrePageBtnArea").show();

if(curPage==1)

{

$("#firstPageBtn").attr("disabled",true);

 $("#prePageBtn").attr("disabled",true);

 $("#firstPageBtn,#prePageBtn").addClass('disable');

$("#firstPrePageBtnArea").hide();

}   

if(curPage==$("#totalPages").text())

{

$("#nextLastPageBtnArea").hide();

//$("#firstPrePageBtnArea").hide();

}

   }

 

function nextPage()

{

var curPage= parseInt(  $("#"+pageCtrlId).val(),10);

var nextPage=curPage+1;

setNextPageInfoNPaging(nextPage);

setBtnDisabled()

}

function firstPage()

{

var curPage= parseInt(  $("#"+pageCtrlId).val(),10);

var nextPage=1;

setNextPageInfoNPaging(nextPage);

setBtnDisabled()

}

function lastPage()

{

var curPage= parseInt(  $("#"+pageCtrlId).val(),10);

var nextPage=$("#totalPages").text();

setNextPageInfoNPaging(nextPage);

setBtnDisabled()

}

 

function prePage()

{

var curPage= parseInt(  $("#"+pageCtrlId).val(),10);

var nextPage=curPage-1;

setNextPageInfoNPaging(nextPage);

setBtnDisabled()

 

}

 

 

 

function setNextPageInfoNPaging(nextPage)

{

$("#"+pageCtrlId).val(nextPage);

$("#page_page_lab").html(nextPage);

var pagesize=$("#pagesize").val();

onSelectPage(nextPage,pagesize);

}

function page_go()

{

var goPage;

try{

goPage= parseInt(  $("#pageItem").val(),10);

}catch(e)

{alert(e);return;

}

//var curPage= parseInt(  $("#"+pageCtrlId).val(),10);

if(goPage=="")

{alert("页码不对");return;

}

if(goPage0)

{

alert("页码不对");return;

}

var  total= parseInt($("#totalPages").text(),10);

if(goPage>total)

{alert("页码不对_overpage");return;}

setNextPageInfoNPaging(goPage);

setBtnDisabled();

 

}

 

 

12. 参考

JAVA实现关系数据库的翻页 - Briver Song的专栏 - 博客频道 - CSDN.NET

ASP.NET 自定义控件 翻页功能 - ミ微笑的借口.的日志 - 网易博客

解决Asp.net中翻页问题的自定义用户控件 - RedSoft - 博客园