yunshichen

我相信人生是值得活的,尽管人在一生中必须遭受痛苦,卑劣,残酷,不幸和死亡的折磨,我依然深信如此.但我认为人生不一定要有意义,只是对一些人而言,他们可以使人生有意义. ---J 赫胥黎

实战YUI 的 patinator(datatable) 组件

默认效果

如果配置了datatable的paginator属性,那么datatable默认会生成两个分页条,上下各一个,见官方例子:




以下例子定制了分页条的显示,效果如下截图:



源码

由于数据源使用json,故无法将所有代码贴出,可参照YUI官方网配置js


<%@ page language="java" contentType="text/html; charset=UTF8"%>

<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css"    href="<%=request.getContextPath()%>/js/yui/2.6.0/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css"    href="<%=request.getContextPath()%>/js/yui/2.6.0/build/button/assets/skins/sam/button.css" />
<script type="text/javascript"    src="<%=request.getContextPath()%>/js/yui/2.6.0/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript"    src="<%=request.getContextPath()%>/js/yui/2.6.0/build/dom/dom-min.js"></script>
<script type="text/javascript"    src="<%=request.getContextPath()%>/js/yui/2.6.0/build/event/event-min.js"></script>
<script type="text/javascript"    src="<%=request.getContextPath()%>/js/yui/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript"    src="<%=request.getContextPath()%>/js/yui/2.6.0/build/element/element-beta-min.js"></script>

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/paginator/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/connection/connection-min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/json/json-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/paginator/paginator-debug.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/datatable/datatable-debug.js"></script>


<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/logger/logger-min.js"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/logger/assets/skins/sam/logger.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/dcj/core-util.js"></script>


<!-- Customized CSS -->
<style type="text/css">
    #dataContainer.yui-dt 
{
        border-bottom
: 1px solid transparent;
        width
: 80%;
        font-size
:15;
    
}
    
    #dataContainer.yui-dt-body 
{
        cursor
: pointer;
    
}  /* when rows are selectable */
    #single 
{
        margin-top
: 2em;
    
}
    #myLogger
{
        position
:absolute;
        top 
: 20px;
        right
:50px;
        font-size
:18;
    
}
</style>
<script>
var DCJ_Datatable=function(myColumnDefs,elContainer,myListUrl,sTitle){
        
// Column defs.
        this.m_columnDefs=myColumnDefs;        
        
this.m_url=myListUrl;
        
// Date source.
        this.m_datasource=new YAHOO.util.DataSource(myListUrl+"?");
        
this.m_datasource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
        
this.m_datasource.connXhrMode = "queueRequests"

       
this.m_datasource.responseSchema={
            resultsList: 
"records",
            metaFields: {
                totalRecords: 
"totalRecords"
            }
        };
        
this.m_datasource.responseSchema.fields=this.m_columnDefs;
         
//Customize paginator.
         //Bar for paginator
         var shtml="{FirstPageLink}&nbsp;&nbsp;{PreviousPageLink}&nbsp;&nbsp;{NextPageLink}&nbsp;&nbsp;{LastPageLink}&nbsp;&nbsp;&nbsp;&nbsp;";
        shtml
+="{CurrentPageReport}";
        
var myPaginator = new YAHOO.widget.Paginator({ 
            rowsPerPage:
<%=request.getAttribute("rowsPerPage")%>,
               firstPageLinkLabel : 
"第一页"
               lastPageLinkLabel : 
"尾页"
               previousPageLinkLabel:
"上一页",
               nextPageLinkLabel:
"下一页",
               containers:
"paginatorContainer",
               template:shtml,
               pageReportTemplate : '第
&nbsp;{currentPage}&nbsp;页&nbsp;&nbsp;总页数:&nbsp;{totalPages}&nbsp;&nbsp;总记录数:&nbsp;{totalRecords}&nbsp;&nbsp;' 
        });
     
        
var myConfigs = {
            initialRequest: 
"sort=id&dir=asc&startIndex=0&results=2"// Initial request for first page of data
            dynamicData: true// Enables dynamic server-driven data
            sortedBy : {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
            paginator:myPaginator,
              MSG_ERROR:
"加载数据发生错误,查询路径是否正确?",
            MSG_LOADING:
"正在加载数据",
            MSG_EMPTY:
"没有记录.",
            caption:sTitle,
            MSG_SORTASC:
"以升序方式排序",
            MSG_SORTDESC:
"以降序方式排序"
        };           

        

        
this.m_dataTable = new YAHOO.widget.DataTable(elContainer,this.m_columnDefs, this.m_datasource,myConfigs);

        
// Subscribe to events for row selection
        this.m_dataTable.subscribe("rowMouseoverEvent"this.m_dataTable.onEventHighlightRow);
        
this.m_dataTable.subscribe("rowMouseoutEvent"this.m_dataTable.onEventUnhighlightRow);
        
this.m_dataTable.subscribe("rowClickEvent"this.m_dataTable.onEventSelectRow);

         
// Update totalRecords on the fly with value from server
        this.m_dataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
            oPayload.totalRecords 
= oResponse.meta.totalRecords;
            
return oPayload;
        }            
        
    }
</script>

<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ taglib uri="/tags/jstl/core" prefix="c"%>
<html>
<head>
<title></title>
<head>
<body class="yui-skin-sam">

<div id="dataContainer"></div>
<div id="paginatorContainer"></div>
<jsp:include page="/jsp/common/datatable.jsp"></jsp:include>
</body>
</html>

<script language="javascript">

//var myLogReader = new YAHOO.widget.LogReader("myLogger"); 

    
var myColumnDefs=<%=request.getAttribute("columnDefs")%>;
    
var myListUrl='<%=request.getAttribute("listUrl")%>';        
        
    
var g_dt = new DCJ_Datatable(myColumnDefs,"dataContainer",myListUrl,"部门设置 --> 列表界面");

</script>



上面的代码新增一个容器并将分页条放在容器之内(上例是一个名为paginatorContainer的div).

分页条的模板


分页条其实由两部分组成,第一部分称为template属性,是表示上一页,下一页等链接的html代码,即如下图所示部分:



这段template的定制代码如上所示,为:

var shtml="{FirstPageLink}&nbsp;&nbsp;{PreviousPageLink}&nbsp;&nbsp;{NextPageLink}&nbsp;&nbsp;{LastPageLink}

{FirstPageLink}  等几个变量是paginator组件预定义好的.他们的label(即第一页等文字)可以自由定制,见paginator的配置代码:

var myPaginator = new YAHOO.widget.Paginator({ 
            rowsPerPage:
<%=request.getAttribute("rowsPerPage")%>,
               firstPageLinkLabel : 
"第一页"
               lastPageLinkLabel : 
"尾页"
               previousPageLinkLabel:
"上一页",
               nextPageLinkLabel:
"下一页",
               containers:
"paginatorContainer",
               template:shtml,
               pageReportTemplate : '第
&nbsp;{currentPage}&nbsp;页&nbsp;&nbsp;总页数:&nbsp;{totalPages}&nbsp;&nbsp;总记录数:&nbsp;{totalRecords}&nbsp;&nbsp;' 
        });

你可以将这些文字换成任何你喜欢的文字.

另外一部分,如总页数,总记录数等显示,在paginator组件术语里称为CurrentPageReport ,如下图所示:



要定制这部分的显示内容,首先要定义pageReportTemplate属性.本例的pageReportTemplate是一段html,引用了总页数,总记录数等几个变量,如下:

pageReportTemplate : '第&nbsp;{currentPage}&nbsp;&nbsp;&nbsp;总页数:&nbsp;{totalPages}&nbsp;&nbsp;总记录数:&nbsp;{totalRecords}&nbsp;&nbsp;





然后,每次数据返回的时候,paginator就会自动更新CurrentPageReport 变量的值,在template里引用该值即可.上例将pageReport和分页按钮放在同一行.所以你看到的代码如下:

var shtml="{FirstPageLink}&nbsp;&nbsp;{PreviousPageLink}&nbsp;&nbsp;{NextPageLink}&nbsp;&nbsp;{LastPageLink}&nbsp;&nbsp;&nbsp;&nbsp;";
shtml+="{CurrentPageReport}";


定制pageReport

参看源码可知,在pageRepor里paginator默认生成了如下几个属性:

    p.setAttributeConfig('pageReportValueGenerator', {
        value : function (paginator) {
            var curPage = paginator.getCurrentPage(),
                records = paginator.getPageRecords();

            return {
                'currentPage' : records ? curPage : 0,
                'totalPages'  : paginator.getTotalPages(),
                'startIndex'  : records ? records[0] : 0,
                'endIndex'    : records ? records[1] : 0,
                'startRecord' : records ? records[0] + 1 : 0,
                'endRecord'   : records ? records[1] + 1 : 0,
                'totalRecords': paginator.get('totalRecords')
            };
        },
        validator : l.isFunction
    });

在例子里我们引用了当前页currentPage,总记录数totalRecords等属性.如果默认属性不能满足你的需求,你可以改写这个函数进行定制.可以参考YUI的自定义paginator一文.




posted on 2008-10-06 11:17 Chenyunshi 阅读(3493) 评论(22)  编辑 收藏 引用 所属分类: Yahoo YUI

评论

# re: 实战YUI 的 patinator(datatable) 组件 2008-10-31 14:26 我有个问题关于DATATABLE的

我做了个页面是DATTABLE分页的,目前是客户端分页。都已经成功。只是我还需要在数据里进行搜索。
于是我又加了个按钮作为测试,点击按钮时候,试图改变数据源。在YAHOO的教程里应该是这样一句话:

function onButtonClick(p_oEvent) {
oDS.sendRequest('typeid=768&proid=86',ocallback);
}

同时定义ocallback:
var ocallback = {
success : myCallback,
failure : myCallback,
scope : this.myDataTable
};

var myCallback = function() {
myDataTable.onDataReturnInitializeTable;
};

就应该可以实现了。但是事实上。我点击按钮一点反应也没有。现在找不到出路,请问你可以帮我的忙吗? 非常感谢你!


  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2008-10-31 14:27 我有个问题关于DATATABLE的

噢我忘记了。 我的页面URL是: http://www.besta.com.cn/ajax/datatable.asp

在页面上可以看到源代码,也就是所有我写的东西了。 这个问题困扰我好几天了!  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2008-10-31 14:56 Chenyunshi

不太明白你的意思. 你是想:

1. 在表格已加载的结果中进行搜索.

2.从另一个数据源进行搜索数据.


如果是1, datatable返回的数据有缓存. 从中搜索即可.

如果是2,是你的代码有问题. 你虽然重新发送了查询请求,但你的datatable绑定在什么数据源上呢? 是原来的那个数据源! 所以你要重新new一个数据源,和datatable绑定,然后再发送查询.

呵呵.希望对你有帮助.  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2008-10-31 16:40 codetome

对于情况1,说实话我还不知道可以有这种方式进行搜索。因为YAHOO的文档里没有任何文字说明可以用缓存进行搜索的。我非常想知道怎样才能实现。

对于情况2,我目前就是按照这样的方式来做。在YAHOO中有个例子:http://developer.yahoo.com/yui/examples/datatable/dt_autocomplete.html

在这个例子中,数据源时不需要发生变化的,在定义数据源中只有一处地方:myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?");

并且在DATATABLE的初始化中使用了myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
myDataSource, {initialRequest: 'datatable=yes&query=' + Dom.get('dt_input').value + '&zip=' + Dom.get('dt_input_zip').value + queryString });

当中有一个initialRequest语句。 也就是说:使用这个数据源,并且在初始化显示的时候的查询参数是initialRequest里的内容。
我就是按照这个样子来做并且第一次显示分页已经成功了。

那么第二步我就需要来查询。同样在这个例子中。 YAHOO的方法也是非常简单的使用了一个myDataSource.sendRequest('datatable=yes&zip=' + query + '&query=' + Dom.get('dt_input').value + queryString,
myDataTable.onDataReturnInitializeTable, myDataTable);
函数就可以实现。 在例子你可以看到源代码。 只是重新定义了查询的参数而已。。 在例子中很方便就可以实现。但是在我自己来做,却困难重重  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2008-12-24 14:19 阎王

datatable记录中文乱码怎样处理?能否解决?
QQ:263725193
e_mail:biiau@163.com  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2008-12-24 16:16 yunshichen

@阎王

这不是datatable的问题,而是ajax的特性.提交的时候以utf8提交,如果你的页面不是用utf8编码(例如用gbk),那么很可能就乱码.

解决方案:
1.在服务端,数据返回之前将数据流转为gbk.
2.更好的办法,页面(不管jsp还是asp还是html)都用utf8编码.

思路就是这样,关于ajax乱码,网上已经有很多文章说到这个问题.去搜搜.  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 11:49 六翼

LZ你好,请问一下:

我也是在做服务器端分页,可是我自己怎么也做不出你的这个效果来

个人的想法是从最笨的来,先把Yahoo的东东依样画葫芦在本机实现了再说,结果全盘拷贝它的代码也不行,后来发现应该是这一句:
var myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");


于是我查到它的绝对路径,是“http://developer.yahoo.com/yui/examples/datatable/assets/php/json_proxy.php?”,替换成了这个之后依然不行:(

我也试过把http://developer.yahoo.com/yui/examples/datatable/assets/php/json_proxy.php这个文件单独下载出来,打开看到是一个JSON格式的东东,然后把它放到我的项目中,再用http://localhost/json_proxy.php这样的格式载入,也是不行……

不知道LZ能否指点一下?谢谢!
  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 12:08 yunshichen

@六翼

关键是这句:

this.m_datasource.responseSchema={
resultsList: "records",
metaFields: {
totalRecords: "totalRecords"
}
};

你在服务器端的数据要按这个格式生成才行.例如:

{
records:{
totalRecords:[

]
}
}

你再去看看YUI 的教程, 看看他的json和datasource所用的key值是否对应就行了.


  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 13:01 六翼

那个,我因为是下载的Yahoo示例里的数据,所以格式上应该是对的吧……
从头到第一条数据结束是这样的:
{"recordsReturned":1397,"totalRecords":1397,"startIndex":0,"sort":null,"dir":"asc","pageSize":1397,"records":[{"id":"0","name":"xmlqoyzgmykrphvyiz","date":"13-Sep-2002","price":"8370","number":"8056","address":"qdfbc","company":"taufrid","desc":"pppzhfhcdqcvbirw","age":"5512","title":"zticbcd","phone":"hvdkltabshgakjqmfrvxo","email":"eodnqepua","zip":"eodnqepua","country":"pdibxicpqipbsgnxyjumsza"},
您看这个对吗?
或者,如果不对的话,我自己先手动写这么一个……txt文件放在本地,然后就应该可以了吗?
谢谢LZ,回复得好快:)  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 13:04 yunshichen

@六翼

你这个json应该可以的.

好吧, 晚上我把我的服务器端代码放上来.到时候你自己对比着看.  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 13:38 六翼

好,再次感谢LZ……
我疑惑的是,我几乎是全盘照抄它的代码,只是改了一下绝对路径和相对路径,咋就不能用呢……  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 13:44 yunshichen


你的疑惑我前两年也多次碰到. 感觉YUI的教程做得不太好, 初学者很难入门. 总有一些似是而非的问题很烦人.

我现在已经转去用Ext了.

源代码已经发给你. 自己好好对比检查. :-)  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 13:45 yunshichen

我倒,这个不是你的邮箱.

我另起一帖  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 13:50 Chenyunshi

@六翼

看这里: http://www.cnitblog.com/yunshichen/archive/2009/10/30/test_yui_dt.html



  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 14:07 六翼

汗,你的代码……我不懂JAVA的,光看到那几处json.append,嘿嘿
最后生成出来也应该就是一个标准的JSON格式对吧?那就还是解决不了我的疑惑,唉……

早上病急乱投医,想着在DataSource里放一个别的类型的东东,比如XML、HTMLTABLE,下面那行的声明也改了,结果还是读不出,真要被这个破东东搞死了…………

不过还是再次谢谢LZ热心的帮助…………  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 14:18 六翼

搞了两段超简短代码,再麻烦LZ帮我看看……

JS的内容:
<script type="text/javascript">
function showDataTable() {
var ds=new YAHOO.util.DataSource("http://localhost:3000/json_proxy.php");
ds.responseType=YAHOO.util.DataSource.TYPE_JSON;
ds.responseSchema={
resultsList: "Result",
fields: ["username","oldname"]
};
var cols=[
{ key: "username", label: "User name" },
{ key: "oldname", label: "ID", sortable: "true" }
];
var dt=new YAHOO.widget.DataTable("complex", cols, ds, {} );
};
</script>

json_proxy.php的内容:
{
Result:{
data:[
{username:"Tom",oldname:"Tom",age:12},
{username:"Jack",oldname:"Jack",age:16}
]
}
}
别的该加载的都加载了,该有的div页面上也有了,可就是读不出东东来……  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 19:07 六翼

还是没搞定…………
或者,LZ能不能告诉我,如果我不是用PHP或者JAVA来生成JSON文件、而是直接写个TXT(可能夸张了点……那么用ROR来生成一个相同的JSON文件吧)在服务器端的话,应该怎么来调用这个文件呢?我试过用ROR生成一个和该PHP一模一样的字符串结果不行……不知道是不是因为JSON格式和字符串格式在本质上不是同一种东东的缘故,唉……  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-30 21:02 Chenyunshi

@六翼

感觉你的问题并不是YUI的问题,而是对服务器端分页的技术理解不深.

我简单的把yui datasource 组件的应用步骤说说吧.

1 将ds声明为TYPE_JSON, 这样yui就会弄一个xhr组件来进行服务端连接.

2.在服务器端处理分页.

你的问题是服务端的分页你并不会做. 你光看yui的这个客户端代码,当然做不到分页效果.

所以,你应该去看看服务器端的分页相关文章.

  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-10-31 11:40 六翼

呃……那么是我理解错误了吧,我以为服务器端只要能生成那样的一个字符串就行了呢(JSON本质上也就是一组字符串吧)
我再去学习一下……  回复  更多评论   

# re: 实战YUI 的 patinator(datatable) 组件 2009-11-28 16:17 oddd

按下一页如何进行向服务端传值,和客户端如何改变当前页码。  回复  更多评论   

只有注册用户登录后才能发表评论。
<2024年3月>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

导航

统计

常用链接

留言簿(7)

随笔分类

随笔档案

文章分类

相册

搜索

最新评论

阅读排行榜

评论排行榜