Question

到目前为止 - 在SO成员的大力支持下，我处于完成音乐数据库程序的边缘，以及其所有复杂性......如前所述，我使用的是Mysql，Php，JQuery和DataTable插件，这给出了很好的分页结果。我的所有搜索结果都按预期工作。

我的数据库包含15列数据。我有一张桌子（可以满足我目前的需求）。我目前能够在900px表中POST和ECHO 12列搜索结果。

为了完成我的项目，我还需要能够显示另外3列 - 数据包含更长的文本（歌曲描述（150个字符）），制作者名称（80个字符）和发布者名称（80个字符），其中显然不适合这个大小的表，即使有包装 - 在同一行回显。

但是如何在SHOW / HIDE隐藏div中发布最后3列？所以用户可能点击一个链接，这些3条信息突然出现在900px表格的任何一行下面？

我已经挣扎了数百个小时才进入最后阶段...所以我需要最后的建议（或推下悬崖），以便在这里找到下一个答案......

提前感谢您提供任何“易于”理解的建议！

Answer 1

由于您说您正在使用datatable插件，因此您可以使用以下示例来显示冗长的详细信息。单击展开按钮后，它将展开特定行。

Answer 2

用户不需要（通常不会关注）所有这些信息。允许他们配置他们可以看到哪些列，如果他们为宽度选择了太多，那么这不是你的问题。

Answer 3

在最右边的列中创建一个链接（例如）。使用这样的锚链接：

<a href="#extra-<?php echo $counter; ?>" class="see-more">See More</a>

在下一个表格行中，输入隐藏的<div id="extra-<?php echo $counter; ?>" class="hidden-more-data">..your data here..</div>

您可以在这些元素中以任何方式构建数据。

在CSS中，您可以使用{display：none;}

隐藏.hidden-more-data

使用jQuery，您可以以这种方式使用$('.see-more').live('click',function(){});：

$('.see-more').live('click',function(){

   var href = this.href;

   $(href).toggle();

   return false;

});

各种类似的可能性。

Answer 4

使用简短标题并显示完整标题on mouse-over或标题属性。

在表格单元格中显示有限的字符。并且详细视图在弹出div或鼠标悬停事件中显示它们。