Pagination issue while toggling between tables in same page
Pagination issue while toggling between tables in same page
seshadri
Posts: 1Questions: 0Answers: 0
Hi,
We have a page, which has 3 radio buttons. On selection of each of the radio button, we hit DB to get data, form HTML, append to table innerHTML. then use that to bind to datatable for pagination. DB hit is done thru ajax calls.
Sample code:
if (ridetype == 0) {
$("#tblregular").html(cont);
$("#tblregular").show();
var oTable = $('#tblregular').dataTable({
"bDestroy": true,
"bRetrieve": true,
"sPaginationType": "full_numbers",
"sLength": 'disabled',
"iDisplayLength": 2,
"bPaginate": true,
"bSorted": false,
"aaSorting": []
});
oTable.fnDraw();
if (document.getElementById("tblinter_paginate") != null) {
document.getElementById("tblinter_paginate").style.display = "none";
}
if (document.getElementById("tblinter_info") != null) {
document.getElementById("tblinter_info").style.display = "none";
}
if (document.getElementById("tblinter_filter") != null) {
document.getElementById("tblinter_filter").style.display = "none";
}
if (document.getElementById("tbloccasional_paginate") != null) {
document.getElementById("tbloccasional_paginate").style.display = "none";
}
if (document.getElementById("tbloccasionalr_info") != null) {
document.getElementById("tbloccasional_info").style.display = "none";
}
if (document.getElementById("tbloccasional_filter") != null) {
document.getElementById("tbloccasional_filter").style.display = "none";
}
document.getElementById("tblregular_paginate").style.display = "block";
document.getElementById("tblregular_info").style.display = "block";
document.getElementById("tblregular_filter").style.display = "block";
}
We've set bDestroy:true. We ran into the problem that, when we select another radio button in the list, the pagination of the previous table got listed. Hence the div toggling was added, which ideally is not necessary.
Also, we had set the display length to 2. So on page load, the first table had paging done for 4 records and there were 2 pages. When the other radio button was selected; then first table was selected, paging was not done. All 4 entries were listed in the page.
Please help and let me know as to what is the mistake here. Please help as soon as possible.
We have a page, which has 3 radio buttons. On selection of each of the radio button, we hit DB to get data, form HTML, append to table innerHTML. then use that to bind to datatable for pagination. DB hit is done thru ajax calls.
Sample code:
if (ridetype == 0) {
$("#tblregular").html(cont);
$("#tblregular").show();
var oTable = $('#tblregular').dataTable({
"bDestroy": true,
"bRetrieve": true,
"sPaginationType": "full_numbers",
"sLength": 'disabled',
"iDisplayLength": 2,
"bPaginate": true,
"bSorted": false,
"aaSorting": []
});
oTable.fnDraw();
if (document.getElementById("tblinter_paginate") != null) {
document.getElementById("tblinter_paginate").style.display = "none";
}
if (document.getElementById("tblinter_info") != null) {
document.getElementById("tblinter_info").style.display = "none";
}
if (document.getElementById("tblinter_filter") != null) {
document.getElementById("tblinter_filter").style.display = "none";
}
if (document.getElementById("tbloccasional_paginate") != null) {
document.getElementById("tbloccasional_paginate").style.display = "none";
}
if (document.getElementById("tbloccasionalr_info") != null) {
document.getElementById("tbloccasional_info").style.display = "none";
}
if (document.getElementById("tbloccasional_filter") != null) {
document.getElementById("tbloccasional_filter").style.display = "none";
}
document.getElementById("tblregular_paginate").style.display = "block";
document.getElementById("tblregular_info").style.display = "block";
document.getElementById("tblregular_filter").style.display = "block";
}
We've set bDestroy:true. We ran into the problem that, when we select another radio button in the list, the pagination of the previous table got listed. Hence the div toggling was added, which ideally is not necessary.
Also, we had set the display length to 2. So on page load, the first table had paging done for 4 records and there were 2 pages. When the other radio button was selected; then first table was selected, paging was not done. All 4 entries were listed in the page.
Please help and let me know as to what is the mistake here. Please help as soon as possible.
This discussion has been closed.