[英]displaying data of datatable column
我在JSF <h:dataTable>
上使用jQuery DataTables插件 。 在此頁面中,我有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條記錄的名稱。
我嘗試通過此鏈接使用fnPagingInfo
,但這沒有提供我要查找的信息(它提供了頁碼,總頁碼等)。
有什么想法可以完成嗎?
我嘗試了以下。
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);
這給我警報, 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]);
});
好吧,這就是我所做的...
<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>
通過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>
`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...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.