热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

YUIDataTable-Howto只有一个分页器?-YUIDataTable-Howtohavejustonepaginator?

ImusingtheYUIDataTableinaGrails1.1projectusingtheGrailsUIplugin1.0.2(YUIbeing2.6.

I'm using the YUI DataTable in a Grails 1.1 project using the Grails UI plugin 1.0.2 (YUI being 2.6.1).

我使用Grails UI插件1.0.2(YUI为2.6.1)在Grails 1.1项目中使用YUI DataTable。

By default, the DataTable displays 2 paginators: one above and another one below the table. Looking up the YUI API documentation, I could see that I can pass an array of YUI containers as a config parameter but - what are the names of these containers?

默认情况下,DataTable显示2个分页器:一个在上面,另一个在表下面。查看YUI API文档,我可以看到我可以将一组YUI容器作为配置参数传递但是 - 这些容器的名称是什么?

I've tried loooking at the HTML of the page using Firebug. The ID of the divs containing the paginators are: yui-dt0-paginator0 (above) and yui-dt0-paginator1 (below). If I use them to configure the containers for the navigator, then the navigator is just not displayed at all. Here's the relevant extract of the GSP page containing the Datatable element.

我尝试使用Firebug来浏览页面的HTML。包含分页符的div的ID是:yui-dt0-paginator0(上面)和yui-dt0-paginator1(下面)。如果我使用它们为导航器配置容器,则根本不显示导航器。这是包含Datatable元素的GSP页面的相关摘录。

    

This is the List of Control Accounts

${flash.message}

Any help?

Thanks!

Rollo

3 个解决方案

#1


Ok, I have it now. Posting it here in case someone bumps into the same question.

好的,我现在拥有它。如果有人碰到同样的问题,请在此处发布。

So what you have to do is create a 'container' (a DIV will do) by whatever id, and reference it into the containers configuration item. Example:

所以你要做的就是用任何id创建一个'容器'(DIV会做),并将它引用到容器配置项中。例:

This is the List of Control Accounts

${flash.message}

You just have to make sure that the class associated to the div is yui-pg-container. As an added bonus, the style on that div will align the paginator to the right.

您只需确保与div关联的类是yui-pg-container。作为额外的奖励,该div上的样式将使分页器与右侧对齐。

Rollo

#2


With YUI 2.8.0 (and maybe with 2.6 as well) there is an easier way. Just add the styles:

使用YUI 2.8.0(也可能是2.6),有一种更简单的方法。只需添加样式:

.yui-skin-sam .yui-dt-paginator {
    text-align:right;
} 

#yui-dt0-paginator1 {
    display:none;
}

This has the advantage that the paginator is aligned to the tables right border. If you want to have the pagination at the bottom of the table, just change yui-dt0-paginator1 to yui-dt0-paginator0.

这具有以下优点:分页器与表右边界对齐。如果你想在表格的底部加上分页,只需将yui-dt0-paginator1更改为yui-dt0-paginator0即可。

#3


I have many tens of YUI datatables and didn't want to have to write a selector for each one so here is what I did. Create a 'container' div around each datatable then use the first-child selector to set the visibility to hidden like so:

我有几十个YUI数据表,并且不想为每个数据表写一个选择器,所以这就是我所做的。在每个数据表周围创建一个“容器”div,然后使用第一个子选择器将可见性设置为隐藏,如下所示:

.container_div .yui-dt-paginator:first-child {
    visibility:hidden;
}

note .container_div can be called what ever you like.

注意.container_div可以随叫随到。

Thanks to both Rollo and jm for the inspiration, it's kind of a mashup of both ideas.

感谢Rollo和jm的灵感,这是两种想法的混搭。


推荐阅读
author-avatar
小猪朱一凡
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有