如何找到基于分页的id [英] how to find id based on pagination

查看:221
本文介绍了如何找到基于分页的id的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在JSF上使用 jQuery DataTables插件 < h:dataTable> ; 。在这个页面中我有86条记录。

  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++ 
+ id +姓名+电子邮件+
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++
+ 1 +姓名1 +电子邮件1 +
+ 2 +姓名2 +电子邮件2 +
+ 3 +姓名3 +电子邮件3 +
+ ........
+ 4 +名称4 +电子邮件4 +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++
b

注意:每个表我显示10条记录。



我的客户想要的是添加列视图将工作如下



当我打开表格时,我有10条记录,表示id 1-10得到1个视图。



我点击分页2,id 11-20得到1个视图。



任何想法如何完成这个工作?






编辑1



我的意思是 get 1 view 如下:



用户A:页面操作时ened,默认分页1为ON。所以在页面上我们有10条记录。表示用户A查看所有10条记录,表示每个id获得1个视图。 SO现在id 1-10有1个意见。用户A退出页面。



用户B:打开页面时,默认分页1为ON。所以在页面上我们有10条记录。意味着用户B查看所有10条记录,表示每个id都获得1个视图。 SO现在id 1-10有2个视图(如用户A已经查看)。现在用户B点击分页2按钮。所以id 11-20获取视图1.用户B退出页面。



这样我想计算每个id的视图。



所以基本上我想要的是




  • 当分页按钮被按下时,我想得到

  • 将这些ID传递给某个bean,并增加这些id。



任何想法如何完成?






编辑2



另请查看



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



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

解决方案

在研究了 jQuery DataTables 的分页后,发现很多很好的东西,例如这个家伙Todd A. Wood在PetaPoco上传数据时做了很好的工作,而分页这里。但即使与您的要求进行比较也很复杂。我必须承认DataTables有很好的文档,我找到了分页插件的答案。



所以魔术功能是: fnPagingInfo 。但是,要获取页面信息,必须通过 fnDrawCallback 来捕获datatable渲染(或重新呈现)事件。



无论如何,您应该嵌入以下代码:

 < 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 =Fenerbahcevalue =#{bean.var1}style =display:none;>< / h:inputText>
< / h:form>

那么我们到目前为止?



我们得到用户点击的页码信息,并将此号码放入我们的 bean 中。其余的存储每个页面的数字,并在有人点击时将其计数在数组中:

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

注意:我已经通过基本的HTML表格尝试过,如:

 < table id =example> 
< thead>
< tr>
< th>列1< / th>
< th>列2< / th>
< th>等< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>行1数据1< / td>
< td>行1数据2< / td>
< td> etc< / td>
< / tr>
< tr>
< td>行2数据1< / td>
< td>行2数据2< / td>
< td> etc< / td>
< / tr>
< / tbody>
< / table>

当然有很多行。


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

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

Here I found all solution...

解决方案

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.

这篇关于如何找到基于分页的id的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆