3

I am using the jQuery DataTables plugin on a JSF <h:dataTable>. In this page I have 86 records. 

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

Note: Per table I am showing 10 records.

What my client want is add a column Views which will work as below.

When I open table I have 10 records, means id 1-10 get 1 view.

When I click pagination 2, id 11-20 get 1 view.

Any idea how to get this done?

Edit 1

What I meant by get 1 view is as below.

User A : When page is opened, default pagination 1 is ON. So on page we have 10 records. Means all 10 records are viewed by user A, means each id get 1 view. SO now id 1-10 have 1 views. User A exits the page.

User B : When page is opened, default pagination 1 is ON. So on page we have 10 records. Means all 10 records are viewed by user B, means each id get 1 view. SO now id 1-10 have 2 views (as user A has already viewed). Now User B clicks pagination 2 button. So id 11-20 get view 1. User B exits the page.

This way I want to calculate views per id.

So basically what I want is

  • When pagination button is pressed, I want to get ids that are on the table.
  • Pass those ids to some bean and increase those id's views.

Any idea how to get this done?

Edit 2

Also check this

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

Here I found all solution...

4

1 回答 1

1

在研究了jQuery DataTables的分页后，发现了很多很棒的东西，例如这个家伙 Todd。A. Wood 在此处分页时使用 PetaPoco 加载数据做得很好。但即使与您的要求相比，它也很复杂。我不得不承认 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>

当然有很多行。

于 2013-04-25T14:12:51.810 回答