如何根据分页查找id

Question

我在 JSF <h:dataTable> 上使用 jQuery DataTables plugin。在此页面中，我有 86 条记录。

+++++++++++++++++++++++++++++++++++++
+ id  +    Name    +   Email        +
+++++++++++++++++++++++++++++++++++++
+  1  +   Name 1   +  Email 1       +
+  2  +   Name 2   +  Email 2       +
+  3  +   Name 3   +  Email 3       +
+........
+  4  +   Name 4   +  Email 4       +
+++++++++++++++++++++++++++++++++++++
+                 1.2.3.4..... Next +
+++++++++++++++++++++++++++++++++++++

注意：每张表我显示 10 条记录。

我的客户想要的是添加一个列视图，它将如下所示。

当我打开表时，我有 10 条记录，这意味着 id 1-10 得到 1 个视图。

当我点击分页 2 时，id 11-20 获得 1 个视图。

知道如何完成这项工作吗？

---

编辑 1

get 1 view 的意思如下。

用户A：打开页面时，默认分页1为ON。所以在页面上我们有 10 条记录。表示用户 A 浏览了所有 10 条记录，表示每个 id 获得 1 次浏览。所以现在 id 1-10 有 1 个视图。用户 A 退出页面。

用户 B ：打开页面时，默认分页 1 为 ON。所以在页面上我们有 10 条记录。表示用户 B 浏览了所有 10 条记录，表示每个 id 获得 1 次浏览。所以现在 id 1-10 有 2 次查看（因为用户 A 已经查看过）。现在用户 B 单击分页 2 按钮。所以 id 11-20 得到视图 1。用户 B 退出页面。

这样我想计算每个 id 的观看次数。

所以基本上我想要的是

• 按下分页按钮时，我想获取表格上的 ID。
• 将这些 id 传递给某个 bean 并增加这些 id 的视图。

知道如何完成这项工作吗？

---

编辑 2

也检查一下

https://stackoverflow.com/a/16934279/1066828

在这里我找到了所有解决方案...

Answer 1

在用jQuery DataTables 研究了分页后，发现了很多很棒的东西，例如这个家伙托德。 A. Wood 在使用 PetaPoco 加载数据方面做得很好，同时分页 here。但即使与您的要求相比，它也很复杂。我不得不承认 DataTables 有很好的文档，我找到了答案 pagination plugin。

所以魔法函数是：fnPagingInfo。但是，为了获取页面信息，必须通过fnDrawCallback 捕获数据表渲染（或重新渲染）事件。

无论如何你应该嵌入以下代码：

<script type="text/javascript">
    $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
    {
        return {
            "iStart":         oSettings._iDisplayStart,
            "iEnd":           oSettings.fnDisplayEnd(),
            "iLength":        oSettings._iDisplayLength,
            "iTotal":         oSettings.fnRecordsTotal(),
            "iFilteredTotal": oSettings.fnRecordsDisplay(),
            "iPage":          oSettings._iDisplayLength === -1 ?
                    0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
            "iTotalPages":    oSettings._iDisplayLength === -1 ?
                    0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
        };
    };

    $(document).ready(function() {
        $('#example').dataTable( {
            "fnDrawCallback": function () {
                var input = document.getElementById('form:Fenerbahce');
                input.value = this.fnPagingInfo().iPage;
            }
        } );
    });

</script>

可以看出，第一部分表示fnPagingInfo 的定义。在第二部分中，fnDrawCallback 捕获了渲染事件，我们输入的值是：

<h:form>
    <h:inputText id="Fenerbahce" value="#{bean.var1}" style="display:none;"></h:inputText>
</h:form>

那么到目前为止我们得到了什么？

我们得到了用户点击的页码信息，并将该页码放入我们的bean。其余部分存储每个页面的编号，并在有人点击时将它们计数到一个数组中：

public void setVar1(String var1) {
    this.var1 = var1;
    Array[var1]++;
}

注意：我已经通过基本的 HTML 表格进行了尝试，例如：

<table id="example">
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>etc</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
        <td>etc</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
        <td>etc</td>
    </tr>
    </tbody>
</table>

当然有很多行。