Question

对于DataTables中的一些用户体验，我有一些（可能）小问题。我在数据表支持论坛上问过这个问题，但是我提出的问题可能会破坏一些规则......或者我的请求只是没有足够的意思来回答^ _ ^

（另外，这主要是帖子的副本/粘贴。我希望你能原谅我。）

我首先要说的是我不是一个经验丰富的程序员。几个星期前我几乎从头开始这段旅程，因此我很有可能直接看到解决方案，而没有意识到我一直这样做。我已经阅读了几次文档，但我认为如果没有一些指导，我完全无法完成这些最终的工作。

这是一个JSBin链接，因此您可以在我尝试解释时阅读：DataTables JSBin

上面jsbin中调用的JSON的内容：

{
    "data":[
            {
            "Name":"Sinatra, Frank",
            "A Application1":"X",
            "SomeGroup":"X",
            "A Application2":null,
            "A Application3":"X",
            "R Rights to service":"X",
            "A Application4":null
            },
            {
            "Name":"Davis, Sammy",
            "A Application1":"X",
            "SomeGroup":"X",
            "A Application2":null,
            "A Application3":"X",
            "R Rights to service":"X",
            "A Application4":null
            },
            {
            "Name":"Martin, Dean",
            "A Application1":"X",
            "SomeGroup":"X",
            "A Application2":null,
            "A Application3":"X",
            "R Rights to service":"X",
            "A Application4":"X"
            },
            {
            "Name":"Bishop, Joey",
            "A Application1":"X",
            "SomeGroup":"X",
            "A Application2":"X",
            "A Application3":null,
            "R Rights to service":"X",
            "A Application4":null
            }
    ],
    "columns":[
            {
            "title":"Name","data":"Name"
            },
            {
            "title":"A Application1","data":"A Application1"
            },
            {
            "title":"SomeGroup","data":"SomeGroup"
            },
            {
            "title":"A Application2","data":"A Application2"
            },
            {
            "title":"A Application3","data":"A Application3"
            },
            {
            "title":"R Rights to service","data":"R Rights to service"
            },
            {
            "title":"A Application4","data":"A Application4"
            }
        ]

}

我对DataTables的使用可能略显不正统，但我不认为这会导致问题。正如您所看到的，我正在构建一个显示一组用户访问权限的网格，以便用户（管理员/经理）可以概览整个团队的访问权限，并能够即时比较用户。对于这个例子看起来有点好，但我内部生成的json文件当然要大一些（平均大约200kb文件大小，未压缩）。这就是我的问题所在。我想将标题旋转45度，以获得更好看的网格。我可以在基于静态html的DataTables中做得很好，但我似乎无法在动态生成的版本中完成它。我可能会盯着自己如何实现我想要的目标。

我的第一个问题：如何在标题内动态添加div和span，以及向th添加一个类。因此，最终结果将是：

<th class="rotate-45"><div><span>Header</span></div></th>

（编辑）我通过调用wrapInner解决了这个问题，如下面的jsbin所示：Datatables JSBin

成功旋转后会应用的其他问题：当标题在静态HTML中旋转时，“可点击区域”与文本位置和方向（可理解）不对应。是否可以将排序限制为创建的div，或者可能是标题文本前面的小区域。例如：仅通过单击排序图标对列进行排序（如果它们在文本前面正确定位）

我的第二个问题是关于显示过滤数据。我想在搜索结果返回所有行为空的列时隐藏列。例如：如果用户搜索frank;dean，则不会显示A Application2的列，因为Frank和Dean都没有链接到该应用程序。

如何干净，动态地实现这一目标？

关于我的本地解决方案的一些其他信息可能重要也可能不重要：我的HTML页面和JSON文件是通过powershell脚本自动为许多不同的组生成的。另外，我没有内联运行DataTables代码，我有一个单独的buildcontent.js文件，其中包含所有DataTables代码。在html文件中创建一个变量，以便buildcontent.js知道要使用哪个json文件。

我认为这不会对可能的解决方案产生重大影响。如果有，请告诉我。

我希望这些问题足够清楚，文字的巨大墙壁也不会太费劲。

提前感谢任何有关正确方向的建议或指示。

Answer 1

我不确定这是否有帮助，但我在项目中遇到了类似的问题。我正在使用JSP页面，我可以使用JSTL库，这就是我的做法。我的列号已修复，我必须将一个类应用于表数据的每一行。

<tbody>
<c:forEach var="dataObject" items="${dataList}" varStatus="listIndex">
<c:choose>
<c:when test="${(listIndex.index mod 2) eq 0}">
<tr class="even pointer">
</c:when>
<c:otherwise>
<tr class="odd pointer">
</c:otherwise>
</c:choose>
<td> ${dataObject.attribute} </td>
........
Add as many columns you have ...
</tr>
</c:forEach>
</tbody>

如果你有动态列，我认为你仍然可以使用嵌套的for循环遍历列数据。我通常在运行时创建一个地图，并使用此地图作为循环的参考。希望这会有所帮助。

由于您有一个控制数据的js文件，我认为您可以使用if else条件并使用元素ID。

jquery数据表：标头自定义，动态列隐藏

1 个答案: