显示数据表列的数据答案

【问题标题】：displaying data of datatable column显示数据表列的数据
【发布时间】：2013-05-29 15:36:51
【问题描述】：

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

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

我想要的是以警报格式显示第二列数据，即显示名称将出现在 datable 上。我每张表有 5 组记录。所以当我点击 1 时，我应该收到前 5 条记录的警报。单击 2 后，我应该会得到 6-10 条记录的名称。

我尝试使用来自this link 的fnPagingInfo，但这并没有给出我正在寻找的信息（它给出了页码、总页码等）。

有什么办法可以完成这项工作吗？

我在下面尝试过。

var cells = [];
var rows = $("#userList").dataTable().fnGetNodes();
for(var i=0;i &lt; rows.length;i++)
{
    cells.push($(rows[i]).find("td:eq(0)").html()); 
}
alert(cells);

这给了我Name 1, Name 2, Name 3, ...的警报

这很好用，但是当我对数据进行排序时会出现问题... :(

当我对数据进行排序（将序列号排序为 4、3、2、1）时，我仍然收到Name 1, Name 2, Name 3, ... 的警报。

警报应该说Name 4, Name 3, Name 2, ...。

下面的代码也是如此。

var secondCellArray = [];
$.each(oTable.fnGetData(), function(i, row) {
    secondCellArray.push(row[0]);
});

【问题讨论】：

虽然 jQuery DataTables 插件 确实是一个很棒的插件，但由于您使用的是 JSF2，如果您使用 Primefaces 或 Richfaces，您的生活会轻松很多。 ..
@Daniel : 是的，我知道了.. 但是对于这个项目，我必须使用 jQuery，因为已经完成了大型编程，我无法通过 Primefaces 进行所有更改.. 下一次，所有项目，我我肯定会使用 Primefaces :) :)

标签： javascript jquery html jsf-2 datatables

【解决方案1】：

嗯，这就是我所做的......

<script type="text/javascript">
    $(document).ready(function(){
        var currData = [];
        var myFinalString = "";

        $('#userList').dataTable( {
            "bPaginate": true,
            "bSort": true,
            "sPaginationType": "full_numbers",
            "bJQueryUI": true,
            "bRetrieve": true,
            "fnPreDrawCallback": function(oSettings) {
                /* reset currData before each draw*/
                currData = [];
                myFinalString= "";
            },
            "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                   /* push this row of data to currData array*/
                   currData.push(aData);
                   myFinalString = myFinalString + aData + "xxxyyyzzz";
            },
            "fnDrawCallback": function () {

                var myTextBox2 = document.getElementById('myHiddenValForId');
                myTextBox2.value = myFinalString;
                myTextBox2.onchange();

                var myTextBox = document.getElementById('myHiddenValForInc');
                myTextBox.value = this.fnPagingInfo().iStart + "," + this.fnPagingInfo().iEnd;
                myTextBox.onchange();

                var cells = [];
                var cells2 = [];
                oTable = $('#userList').dataTable();

                var rows = $("#userList").dataTable().fnGetNodes();

                for(var i=0;i &lt; rows.length;i++) {
                    var data = oTable.fnGetData( i,0 );
                    cells.push($(rows[i]).find("td:eq(0)").html()); 
                    cells2.push(data); 
                }

                var secondCellArray = [];
                $.each(oTable.fnGetData(), function(i, row) {
                    secondCellArray.push(row[0]);
                });
            }
        });
    });
    $.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 )
        };
    };
</script>

通过f:ajax传递这些值

<h:form prependId="false">
    <h:inputText id="myHiddenValForInc" value="#{SearchBean.hiddenVal001}" style="display: none;">
        <f:ajax listener="#{SearchBean.printMyHiddenDetails()}" event="valueChange" />
    </h:inputText>

    <h:inputText id="myHiddenValForId" value="#{SearchBean.hiddenVal002}" style="display: none;" >
        <f:ajax listener="#{SearchBean.printMyHiddenDetails2()}" event="valueChange" />
    </h:inputText>
</h:form>

.java

`printMyHiddenDetails()` have all stuff for finding names & `printMyHiddenDetails2()` don't have any code


public void printMyHiddenDetails() {
    // my code
}


public void printMyHiddenDetails2() {
    // noting here... this is just for passing data...
}

【讨论】：