jquery - 如何根据分页查找ID

我在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

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

最佳答案

在研究了jQuery DataTables的分页之后，发现了很多很棒的东西，例如，这个家伙Todd。答：Wood在分页here时用PetaPoco加载数据方面做得很好。但是，即使将其与您的需求进行比较，也很复杂。我不得不承认DataTables拥有出色的文档，并且找到了答案pagination plugin。

因此魔术功能是：fnPagingInfo。但是，要获取页面信息，必须通过fnDrawCallback捕获数据表的render（或re-render）事件。

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

<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捕获render事件，我们将输入值设为：

<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>

当然有很多行。