实战YUI 的 patinator(datatable) 组件

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

默认效果

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

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

源码

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

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


<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>


<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}  {PreviousPageLink}  {NextPageLink}  {LastPageLink}    ";
        shtml+="{CurrentPageReport}";
        var myPaginator = new YAHOO.widget.Paginator({
            rowsPerPage:<%=request.getAttribute("rowsPerPage")%>,
               firstPageLinkLabel : "第一页",
               lastPageLinkLabel : "尾页",
               previousPageLinkLabel:"上一页",
               nextPageLinkLabel:"下一页",
               containers:"paginatorContainer",
               template:shtml,
               pageReportTemplate : '第 {currentPage} 页  总页数: {totalPages}  总记录数: {totalRecords}  '
        });

        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}  {PreviousPageLink}  {NextPageLink}  {LastPageLink}

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

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

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

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

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

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

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

var shtml="{FirstPageLink}  {PreviousPageLink}  {NextPageLink}  {LastPageLink}    ";
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 阅读(3524) 评论(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

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

刷新评论列表

只有注册用户登录后才能发表评论。