Jquery UI tabs and Adding dataTable to the tables inside tabs not working as expected
Jquery UI tabs and Adding dataTable to the tables inside tabs not working as expected
venkub
Posts: 12Questions: 0Answers: 0
Hi, Please help me, trying it for past few days now.
I have 3 links in my page and these 3 links are made as tabs using Jquery UI. All these 3 link go into a Servlet to fetch the data.
Tab1- Form
Tab2- Table
Tab3- Table
I applied Tab2 dataTable, I see a drop down, search box and sort showing up, however none of them are working..when i select 50 from drop down, i see no effect. when i type something in the Search box nothing is happening...Same case with Sort as well.. Please help me.
This is the Code i have.
$("#dispResourceRecords").dataTable({
"bJQueryUI": true
});
Code for Jquery Tabs.
$("#main").tabs({
cache: false,
spinner: "Retrieving data...",
ajaxOptions: { async: false,cache:false }
});
Thank you!
I have 3 links in my page and these 3 links are made as tabs using Jquery UI. All these 3 link go into a Servlet to fetch the data.
Tab1- Form
Tab2- Table
Tab3- Table
I applied Tab2 dataTable, I see a drop down, search box and sort showing up, however none of them are working..when i select 50 from drop down, i see no effect. when i type something in the Search box nothing is happening...Same case with Sort as well.. Please help me.
This is the Code i have.
$("#dispResourceRecords").dataTable({
"bJQueryUI": true
});
Code for Jquery Tabs.
$("#main").tabs({
cache: false,
spinner: "Retrieving data...",
ajaxOptions: { async: false,cache:false }
});
Thank you!
This discussion has been closed.
Replies
This is your complete init code?
[quote]venkub said: $("#dispResourceRecords").dataTable({
"bJQueryUI": true
});[/quote]
Try adding to the init > "bPaginate": true, "bFilter": true, "sDom": '<"H"Tfr>t<"F"ip>',
Here is the code that i have in the vacationtracker.JS file.
$(document).ready(function(){
$("#delete").button();
$("#reject_record").button();
$("#approve_record").button();
$("#override").button();
$("#dispResourceRecords").dataTable({
bJQueryUI: true,
"bPaginate": true,
"bFilter": true,
"sDom": '<"H"Tfr>t<"F"ip>'
});
$("#delete").click(function(e){
e.preventDefault();
//alert($('input[type=radio]:checked').val());
if($('input[type=radio]:checked').val()){
$("#confirmation").dialog({
resizable: false,
modal: true,
title: "Confirmation",
buttons: {
Sure:function(){
var a=$('form#rsrRcd').serialize();
//alert(a);
$.ajax({
type:"POST",
url:"VacationRecordDelete",
data:a,
cache:false,
success: function(html){
$("#ui-tabs-2").html(html);
//location.replace(html);
}
});
$( this ).dialog( "close" );
},
No:function(){
$( this ).dialog( "close" );
}
}
});
}else{
$("#miss").dialog({
resizable: false,
modal: true,
title: "Error",
buttons: {
Gotit:function(){
$( this ).dialog( "close" );
}
}
});
}
});
});
here is my JSP page code that i have..i get the data pulled from Database.
Approved:${count.approved}
Pending:${count.pending}
Rejected:${count.rejected}
Del
From DT
To DT
OOO Type
Reason
Vac_App_Name
Approval_Status
${userRecords.fromDate}
${userRecords.toDate}
${userRecords.oooType}
${userRecords.comments}
${userRecords.approverName}
${userRecords.approval_Status}
${userRecords.approval_Status}
${userRecords.approval_Status}
Please select a record
Are you sure you want to Delete?
Are you filling the table when page load or using some $.ajax call.
If you are using ajax to fill the table try putting the init code in ajax succes:
[code]
$.ajax({
type: "POST",
url: 'url',
success: function (partialView) {
$("#dispResourceRecords").dataTable({
bJQueryUI: true,
"bPaginate": true,
"bFilter": true,
"sDom": '<"H"Tfr>t<"F"ip>'
});
} //end success
});
[/code]
Filter and paging works perfect almost ever.
I took out Jquery UI and opened the page with having dataTable CSS, and JS files. I even took out the JS code that i have and did a inline code like this below, but for some reason it is not working.I still get no match found when i search and sort and number of record display doesn't work.
$(document).ready(function(){
$("#dispResourceRecords").dataTable(
);
});
Just wanted to double check. I am having following CSS files and JS in my page..?
jquery.dataTables_themeroller.css
jquery.dataTables.css
And
jquery.js
jquery.dataTables.js
Having a Radio button as first column, does it make any difference or causing this problem please? Sorry if this question doesn't make any sense..I am still learning.
Thank you!
This is your header:
Del
From DT
To DT
OOO Type
Reason
Vac_App_Name
Approval_Status
Try setting up each column like this ( using "aoColumnDefs" ):
so before "bJquery": true (inside init fn)
[code]
"aoColumnDefs": [
{ "bSearchable": false, "bSortable": false, "aTargets": [0] } // the radio button column (index starts at 0
, { "bSearchable": true, "bSortable": true, "aTargets": [1] }
, { "bSearchable": true, "bSortable": true, "aTargets": [2] }
, { "bSearchable": true, "bSortable": true, "aTargets": [3] }
, { "bSearchable": true, "bSortable": true, "aTargets": [4] }
, { "bSearchable": true, "bSortable": true, "aTargets": [5] }
, { "bSearchable": true, "bSortable": true, "aTargets": [6] }
]
[/code]
This code allows the datatable to filter all columns except the first one (radion button column)
If you want another column not to filter just change bSearchable to false
change bSortable to false if you want that column not to sort as well.
As you can see, each column definition { } targets to one of your columns based on the index.
this should fix your filter
How can clear this please?
Thanks for all the help again.
I need the full code of the page with tabs, (NOT THE ONE THAT FILL THE TABLE)
But since you wanted to see the code I am pasting it below. Hope making it bDestroy:true is the right way to do this. The "mgrTable " is another table in Tab3 (which is "ManagerRecordDisplay" servlet. Check the bottom of the post for the HTML page.).
Error i was getting previously but not anymore after having bDestroy:true.
"DataTable warning (table id='dispResourceRecords'): cannont reinitialise DataTable. To retrive the DataTable object for this table, pass no arguments or see the doc for bRetrive and bDestory"
Here is the code i have for the table, JS and servlet.
vacatinotracker.js file
$(document).ready(function(){
$("#delete").button();
$("#reject_record").button();
$("#approve_record").button();
$("#override").button();
$("#dispResourceRecords").dataTable({
"bDestroy": true
});
$("#mgrTable").dataTable({
});
My Servlet to contact DB and get the data.
package VacationTracking;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* Servlet implementation class ResourceRecordDisplay
*/
public class ResourceRecordDisplay extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
try{
HttpSession session=request.getSession(false);
LoginBean bean= (LoginBean)session.getAttribute("userInfo");
if(bean.getNbkid().isEmpty()){
request.getRequestDispatcher("WEB-INF/Error.jsp").forward(request, response);
}else{
List userRecords=VacationRequestDAO.displayRecords(bean);
request.setAttribute("userRecords", userRecords);
LoginRecordCountBean count=VacationRequestDAO.recordCount(bean,"Resource");
session.setAttribute("count", count);
//System.out.println(userRecords);
request.getRequestDispatcher("WEB-INF/vacationRecordDisply.jsp").forward(request, response);
}
}catch (Exception e){
System.out.println("An error occured in ResourceRecordDisplay.java" + e);
}
}
}
This servlet pulls the data and forwards the response to vacationRecordDisplay.jsp servlet. (Past the JSP in above post)...
here is the page that user gets as tabs and when he click on ResourceRecordDisplay link it contacts above servlets and fetches the data.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Welcome To SBSB Vacation Tracking
User Info
Name:
${userInfo.first_last_name}
NBK_id:
${userInfo.nbkid}
Team:
${userInfo.team}
Shore:
${userInfo.shore}
Approved:${count.approved}
Pending:${count.pending}
Rejected:${count.rejected}
Raise Request
My Request
Approve Request
}
I post all the code the i use for Tab2 above..and i use a similar code for Tab3 to display all the records a manager should approve... Now i get a message like this "DataTable warning (table id-'mgrTable'): Requested unknown parameter '1' from the data source for row 0"
Can you help me on this please?
Tab3 Table: JSP Page
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Manager Approval Details
${message}
Approved:${count_mgr.approved}
Pending:${count_mgr.pending}
Rejected:${count_mgr.rejected}
Del
Resource
From DT
To DT
OOO Type
Reason
Approval_Status
${magrRecords.resource_name}
${magrRecords.fromDate}
${magrRecords.toDate}
${magrRecords.oooType}
${magrRecords.comments}
${magrRecords.approval_Status}
${magrRecords.approval_Status}
${magrRecords.approval_Status}
Please select a record
Are you sure you want to Approve?
Are you sure you want to Reject?
Are you sure you want to Override?
Servlet i user for this tab.
package VacationTracking;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* Servlet implementation class ManagerRecordDisplay
*/
public class ManagerRecordDisplay extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
HttpSession session=request.getSession(false);
LoginBean bean= (LoginBean)session.getAttribute("userInfo");
if(bean.getNbkid().isEmpty()){
request.getRequestDispatcher("WEB-INF/Error.jsp").forward(request, response);
}else{
List magrRecords=VacationRequestDAO.mgrdisplayRecords(bean);
request.setAttribute("magrRecords", magrRecords);
LoginRecordCountBean count_mgr=VacationRequestDAO.recordCount(bean,"Manager");
request.setAttribute("count_mgr", count_mgr);
request.getRequestDispatcher("WEB-INF/approveRequest.jsp").forward(request, response);
}
}catch (Exception e){
System.out.println("Error Occured in ManagerRecordDisplay.java class:"+ e);
}
}
}
Del
Resource
From DT
To DT
OOO Type
Reason
Approval_Status
${magrRecords.resource_name}
${magrRecords.fromDate}
${magrRecords.toDate}
${magrRecords.oooType}
${magrRecords.comments}
${magrRecords.approval_Status}
${magrRecords.approval_Status}
${magrRecords.approval_Status}