how to find id based on pagination

问题

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

回答1:

After researching about pagination with jQuery DataTables, found lot's of great stuff, for example this guy Todd. A. Wood made a great job about loading data with PetaPoco while paging here. But it's complicated even when it's compared with your requirement. I have to confess DataTables got great documentation, and I found the answer pagination plugin.

So the magic function is: fnPagingInfo. But, for getting the page info the datatable render(or re-render) event must be captured via fnDrawCallback.

Anyway you should embed below codes:

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

As can be seen the first part means definiton of fnPagingInfo. In the second part fnDrawCallback captures the render event and we are putting the value of input which is:

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

So what we got so far?

We got the information of page number which clicked by User and put this number into our bean. Rest of it storing the number for each page and counting them in an array when someone clicks:

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

Note: I've tried this via basic HTML table like:

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

With lot's of rows of course.

来源：https://stackoverflow.com/questions/16192543/how-to-find-id-based-on-pagination

标签

jquery