显示数据表列的数据 [英] displaying data of datatable column
问题描述
我在JSF < h：dataTable>上使用 jQuery DataTables插件 ; 。在这个页面我有86条记录。
++++++++++++++++++++++++++ +++++++++++
+ SN。 +姓名+电子邮件+
+++++++++++++++++++++++++++++++++++++
+ 1 +姓名1 +电子邮件1 +
+ 2 +姓名2 +电子邮件2 +
+ 3 +姓名3 +电子邮件3 +
+ ........
+ 4 +名称4 +电子邮件4 +
++++++++++++++++++++++++++++++++++++ ++
+ 1.2.3.4 .....下一个+
++++++++++++++++++++++++++++++ ++++++++
我想要的是以alert格式显示第二列数据显示将在datable上的名字。每桌有5组记录。所以当我点击1时，我应该会获得前5条记录的警报。一旦我点击2，我应该得到6-10条记录的名字。
我试着从
完成这个任务的任何想法？
我在下面试过。
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（单元格）;
这让我警觉为名称1，名称2，名称3。 ..
完美地工作，但是当我对数据进行排序时会出现问题...... :(
）当我对数据进行排序（将序列号排序为4,3,2,1）时，我仍然会以名称1，名称2，名称3，...的形式发出警报。 。
警报应该说名称4，名称3，名称2，...
以下代码也是如此。
var secondCellArray = [];
$ .each（oTable.fnGetData（），function（i，row）{
secondCellArray.push（row [0]）;
}）;
好的，这就是我所做的......
< script type =text / javascript>
$（document）.ready（function（）{
var currData = [];
var myFinalString =;
$ b $（'＃userList'）。dataTable（{
bPaginate：true，
bSort：tru e，
sPaginationType：full_numbers，
bJQueryUI：true，
bRetrieve：true，
fnPreDrawCallback：function（oSettings）{
/ *在每次绘制前重置currData * /
currData = [];
myFinalString =;
}，
fnRowCallback：函数（nRow，aData，iDisplayIndex，iDisplayIndexFull）{
/ *将这一行数据推送到currData数组* /
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（）; （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 =myHiddenValForIncvalue =＃{SearchBean.hiddenVal001}style =display：none;>
< h：inputText id =myHiddenValForIdvalue =＃{SearchBean.hiddenVal002}style =display：none; >
< / h：表格>
.java
`printMyHiddenDetails（）`拥有所有用于查找名称和放大器的东西。 `printMyHiddenDetails2（）`没有任何代码
public void printMyHiddenDetails（）{
//我的代码
}
public void printMyHiddenDetails2（）{
//注意这里...这仅仅用于传递数据...
}
I am using the jQuery DataTables plugin on a JSF <h:dataTable>. In this page I have 86 records.
+++++++++++++++++++++++++++++++++++++
+ 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 +
+++++++++++++++++++++++++++++++++++++
What I want is display the second column data in alert format i.e. display names that will be there on datable. I have 5 set of records per table. SO when I click 1, I should get alert of first 5 records. Once I click 2, I should get names of 6-10 records.
I tried using fnPagingInfo from this link, but this don't give the info that I am looking for (it gives page number, total page numbers, etc) .
Any idea to get this done?
I tried with below.
var cells = [];
var rows = $("#userList").dataTable().fnGetNodes();
for(var i=0;i < rows.length;i++)
{
cells.push($(rows[i]).find("td:eq(0)").html());
}
alert(cells);
This gives me alert as Name 1, Name 2, Name 3, ...
This works perfectly, but the problem occurs when I sort the data... :(
When I sort the data (sort the serial number as 4,3,2,1), I still get alert as Name 1, Name 2, Name 3, ....
Alert should say Name 4, Name 3, Name 2, ....
Same is happening with below code also.
var secondCellArray = [];
$.each(oTable.fnGetData(), function(i, row) {
secondCellArray.push(row[0]);
});
Well, this is what I did...
<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 < 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>
Pass those values through 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...
}
这篇关于显示数据表列的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
