Question

我正在为我的项目使用DataTables插件。现在我想要做的是非常独特的，我不太确定如何去做。基本上在我的数据表中，第一行始终与登录用户相关。因此，无论何时进行排序，分页和搜索，我都希望该行保持一致并且永远不会移动或消失。如果我能将它应用到第二行会很好，所以我可以在个人行和其他数据之间有一种类似的分隔行。

我该如何处理？

修改

fiddle ，这显示表现在让我们假设我是迈克曼，我想在任何时候都在桌子的顶端。整个搜索，分页和排序。

我已经调用了这样的函数：

$(document).ready(function() {
    $("#dataTable").dataTable();
});

但我希望我需要根据自己的需要进行调整。

Answer 1

将您想要始终存在的第一行存储在变量中，例如var row;。假设您的数据表具有类.data-table，或者您希望使用的其他选择器。像往常一样生成分页表，而不是第一行。然后，您可以在脚本的每个页面上使用prepend() JQuery方法，以下列方式将此行添加到表中：

$('.data-table').prepend(row);

如果您还希望在此之后添加分隔符，只需将其添加到row变量的末尾。

Answer 2

您可以通过将<thead> <tr>视为始终可见的“用户行”来轻松完成此操作。在<thead>中声明一个额外的行：

<tr id="userRow">
   <th></th>
   <th></th>
   ...
</tr>

将原来的<thead> <tr> ID #sortRow。在initComplete popuplate #userRow中包含第一行的内容，并交换两个<thead> <tr>：

initComplete : function() {
   this.api().row(0).data().forEach(function(str, i) {
       $("#userRow th:eq("+i+")").text(str);
   })           
   $("#userRow").before($("#sortRow"));
}

演示 - ＆gt;的 http://jsfiddle.net/my577xu4/

在你的情况下，你可以做同样的事情，但你的复杂的嵌套表和非常接近的CSS样式内容需要额外的手持调整：

initComplete : function() { $("#userRow th:eq(0)").html(this.api().row(0).column(0).nodes().to$().html()); $("#userRow th:eq(1)").html(this.api().row(0).column(1).nodes().to$().html()); $("#userRow").before($("#sortRow")); }

几乎就在那里，但是有些CSS使紫色圆圈浮动，你需要设置复制的嵌套<table>结构的样式 - ＆gt; https://jsfiddle.net/zukbrc57/1/ - 我不敢尝试使用如此详细的布局：）

JQuery DataTables阻止对第一行

2 个答案: