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 - 博客园
