I have a table which displays list of records.I want to achieve sorting and pagination function for this.As shown in figure i have achieved pagination and sorting.But this is affecting my tabs which are not responding when this sorting feature component is included.
Tabs code
<apex:tabPanel id="theTabPanel" selectedTab="ONE1" tabclass="activeTab" inactivetabclass="inactiveTab" contentStyle="font-size: .01px;">
<apex:tab label="Unclaimed Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/UnclaimedTicketPage');" name="One1" id="One1" />
<apex:tab label="MyTeam Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/MyTeamTicketpage');" name="Open5" id="tab2"/>
<apex:tab label="My Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/ClaimedTicketPage');" name="OpenActivities2" id="tabOpenAct2"/>
<apex:tab label="Patient View" switchType="client" ontabenter="window.parent.location.replace('/apex/TabCCPatientGrid');" name="OpenActivities3" id="tabOpenAct3"/>
</apex:tabPanel>
here i am referencing the component
<c:Enhancetable targetPbTableIds="tableRecords" paginate="true" defaultPageSize="15" pageSizeOptions="15,25,50,100"/>
the component code is
<apex:component id="pbEnhancerMain" layout="block" selfClosing="true">
<apex:attribute type="String" required="true" name="targetPbTableIds" description="A comma seperated list of Ids of target pageblock table" />
<apex:attribute type="boolean" name="paginate" description="assign true if you want to use the pagination feature,default value is true" default="true"/>
<apex:attribute type="Integer" name="defaultPageSize" description="Default page size when pagination is implemented"/>
<apex:attribute type="String" name="pageSizeOptions" description="A comma seperated list of integer values that will displayed as dropdown for page size"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"/>
<!--<apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'jquery.dataTables.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'typeDetection.js')}"/>-->
<Script src="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'jquery.dataTables.js')}"></script>
<Script src="{!URLFOR($Resource.PageBlockTableEnhancerADVResources,'typeDetection.js')}"></script>
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css"/>
<apex:stylesheet value="{!URLFOR($Resource.PageBlockTableEnhancerADVResources, 'jquery.dataTables_themeroller.css')}" />
<script>
if(jQuery) {
jQuery.noConflict();
}
function PageBlockTableEnhancerADV(){
var PbeAdv=jQuery.noConflict();;
PbeAdv=this;
jQuery(function($){
PbeAdv.init($)
});
}
PageBlockTableEnhancerADV.prototype={
init : function($){
try{
var targetIds = '{!targetPbTableIds}';
var targetIdArray = targetIds.split(",");
$(targetIdArray ).each(function(){
var elem = this.trim();
var elemObj = $("[id$='"+elem+"']");
elemObj.addClass("BlogForce9TableADV");
});
dataTable = $('.BlogForce9TableADV').dataTable({
"bJQueryUI": true,
"aaSorting": [],
"bFilter":true,
"bPaginate" : {!paginate},
"bDestroy": true,
"sPaginationType": "full_numbers",
"sDom": '<T><"ui-helper-clearfix dtExport"><><"H"lfr>t<"F"ip>',
"aLengthMenu": getALengthMenu(),
"iDisplayLength": {!IF(defaultPageSize == NULL,10,defaultPageSize)}
});
}
catch(err){
if (typeof console == "object") {
console.log(err);
}
}
}
}
function getALengthMenu(){
var temp = [ 10, 20, 30, 50];
if({!pageSizeOptions != NULL}){
temp = "{!pageSizeOptions}".split(",");
for (a in temp ) {
temp[a] = parseInt(temp[a], 10);
}
}
return temp;
}
function initPageBlockTableEnhancerADV(){
new PageBlockTableEnhancerADV({});
}
initPageBlockTableEnhancerADV();
</script>
<style>
.paging_full_numbers .ui-button{
color:black !important;
}
</style>
</apex:component>
when i take out this component the tabs are working fine.But when i refer this component for pagination and sorting i was getting conflit which is not allowing me to click the tabs.
can some one help me where exactly the conflict is getting arised.
when i add var $jq = jQuery.noConflict(true);
in visual force page it is not showing sorting and pagination things but tabs are working fine
My visual force page
<apex:page standardController="case" extensions="UnclaimedTicket" sidebar="false" tabStyle="case" recordSetVar="search" >
<head>
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jQuery/js/jquery.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jQuery/js/advancedtable_v2.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/jQuery/css/advancedtable.css')}" />
<!-- This is(32,33,34 Lines) for Advance Search Text Box Removing Added by Lakshmi on 6/19/15 -->
<style>
.dataTables_filter, .dataTables_info { display: none; }
</style>
<script>
$ = jQuery.noConflict();
$(document).ready(function() {
//code when page is ready
});
</script>
</head>
<script>
function checkedfield(nm, txt,field){
if(document.getElementById(nm) != null){
if(document.getElementById(nm).disabled == true){
document.getElementById(nm).disabled = false;
var check = $("input[id$=Checked_Item]").val();
$("input[id$=Checked_Item]").val(field + check);
check = $("input[id$=Checked_Item]").val();
}else{
document.getElementById(nm).disabled = true;
var check = $("input[id$=Checked_Item]").val();
if(check.indexOf(field) != -1)
check = check.replace(field,'');
$("input[id$=Checked_Item]").val(check);
}
}
if(document.getElementById(txt) != null){
if(document.getElementById(txt).disabled == true){
document.getElementById(txt).disabled = false;
var check = $("input[id$=Checked_Item]").val();
$("input[id$=Checked_Item]").val(field + check);
check = $("input[id$=Checked_Item]").val();
}else{
document.getElementById(txt).disabled = true;
var check = $("input[id$=Checked_Item]").val();
if(check.indexOf(field) != -1)
check = check.replace(field,'');
$("input[id$=Checked_Item]").val(check);
}
}
return true;
}
</script>
<apex:form rendered="{!updateselected}" id="fm">
<apex:outputPanel styleClass="customPopup" layout="block" >
<apex:pageBlock title="Mass Update" mode="edit">
<apex:pageBlockButtons location="both">
<apex:commandButton value="Save" action="{!save}"/>
<apex:commandButton value="Cancel" action="{!cancel1}" reRender="fm"/>
</apex:pageBlockButtons>
<apex:pageBlockSection id="mus1" columns="1">
<apex:inputfield label="Tier level" Value="{!SMTPnew.Tier_Level__c}" required="false" />
<br/>
<apex:inputField label="Assign To" Value="{!SMTPnew.Assigned_To__c}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:outputpanel>
</apex:form>
<apex:form rendered="{!updateseverity}" id="fm1">
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!regionValue!='--Select--'}" >
<apex:pageBlock title="Mass Update" mode="edit">
<apex:pageBlockButtons location="both">
<apex:commandButton value="Save" action="{!Masssave}"/>
<apex:commandButton value="Cancel" action="{!cancel1}" reRender="fm1"/>
</apex:pageBlockButtons>
<apex:pageBlockSection id="mus11" columns="1">
<apex:inputfield label="Severity" Value="{!SMTPnew.Severity__c}" required="false" rendered="{!regionValue=='Update Severity' }" />
<apex:inputfield label="Priority" Value="{!SMTPnew.Priority__c}" required="false" rendered="{!regionValue=='Update Priority'}"/>
<apex:selectList required="false" value="{!SMTPnew.Status}" size="1" rendered="{!regionValue=='Update Task Status'}">
<apex:selectOption itemValue="--None--" itemLabel="--None--"/>
<apex:selectOption itemValue="Re-Open" itemLabel="Re-Open"/>
<apex:selectOption itemValue="Closed" itemLabel="Closed"/>
</apex:selectList>
<br/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:outputpanel>
</apex:form>
<apex:form rendered="{!selectednew}">
<apex:pageMessages ></apex:pageMessages>
<apex:outputPanel id="SearchOverridePanelId">
<apex:pageBlock title="Unclaimed Ticket">
<style>
.activeTab {background-color: #B0E2FF; color:black;font-size:17px;
background-image:none}
.inactiveTab { background-color: lightgrey; color:black;font-size:17px;
background-image:none}
.background { background-color: lightgrey; font-size:12px; color:black}
</style>
<apex:tabPanel id="theTabPanel" selectedTab="ONE1" tabclass="activeTab" inactivetabclass="inactiveTab" contentStyle="font-size: .01px;">
<apex:tab label="Unclaimed Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/UnclaimedTicketPage');" name="One1" id="One1" >
</apex:tab>
<apex:tab label="MyTeam Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/MyTeamTicketpage');" name="Open5" id="tab2" >
</apex:tab>
<apex:tab label="My Ticket" switchType="client" ontabenter="window.parent.location.replace('/apex/ClaimedTicketPage');" name="OpenActivities2" id="tabOpenAct2" >
</apex:tab>
<apex:tab label="Patient View" switchType="client" ontabenter="window.parent.location.replace('/apex/TabCCPatientGrid');" name="OpenActivities3" id="tabOpenAct3" >
</apex:tab>
</apex:tabPanel>
<BR/>
<b>Mass Update:</b>
<apex:selectList value="{!regionValue}" size="1">
<apex:selectOptions value="{!regionOptions}"/>
</apex:selectList>
<apex:commandButton value="GO" action="{!Massupdate}"/>
<BR/> <BR/>
<apex:commandButton value="Assign To" action="{!submit}" rendered="{!IF($Profile.Name =='System Administrator'|| $Profile.Name =='CC Admin' , true , false)}" />
<apex:commandButton id="clear_val1" value="Refresh" action="{!cler}"/>
<apex:commandButton value="New Ticket" action="{!NewTicket}"/>
<apex:commandButton value="Assign To Admin" action="{!AssignToAdmin}" rendered="{!IF( $Profile.Name =='CC Non-Admin' ||$Profile.Name =='Non Admin CC', true , false)}"/>
<apex:commandButton value="Release" action="{!Release}" rendered="{!IF($Profile.Name =='System Administrator'|| $Profile.Name =='CC Admin' , true , false)}" />
<apex:commandButton value="Claim" action="{!Claim}" />
</apex:pageBlock>
</apex:outputPanel>
<br/><br/>
<apex:pageBlock rendered="{!selectednew}">
Search By
<apex:selectList value="{!se}" size="1" >
<apex:selectOption itemValue="--None--" itemLabel="--None--" />
<apex:selectOption itemValue="BlueStar ID" itemLabel="BlueStar ID" />
<apex:selectOption itemValue="HubID" itemLabel="Patient ID" />
<apex:selectOption itemValue="SR Type" itemLabel="SR Type" />
<apex:selectOption itemValue="Tier Level" itemLabel="Tier Level" />
<apex:selectOption itemValue="Priority" itemLabel="Priority" />
<apex:selectOption itemValue="Severity" itemLabel="Severity" />
<apex:selectOption itemValue="Patient Name" itemLabel="Patient Name"/>
<apex:selectOption itemValue="Status" itemLabel="Status"/>
<apex:selectOption itemValue="Follow-up Date" itemLabel="Follow-up Date"/>
<apex:selectOption itemValue="Provider Name" itemLabel="Provider Name" />
</apex:selectList>
Enter {!labeling} Value
<apex:inputtext id="search_val" value="{!idValEntr}" /> <apex:commandButton value="Search" action="{!doSearch}" />
<apex:commandButton id="clear_val" value="Clear" action="{!cler}">
</apex:commandButton>
</apex:pageBlock>
<apex:outputPanel id="pbtb1" rendered="{!selectednew}">
<apex:pageBlock mode="maindetail" >
<!--======================Jquery=================================-->
<table width="100%" id="tableRecords" class="advancedtable" styleClass="list" border="0" cellspacing="0" cellpadding="0">
<thead>
<!-- This(275 Line) For Sorting Pagenation,Default Size 6/19/15 added by Lakshmi -->
<c:Enhancetable targetPbTableIds="tableRecords" paginate="true" defaultPageSize="15" pageSizeOptions="15,25,50,100"/>
<tr>
<th style="text-align:left;">Select</th>
<!-- <th style="text-align:left;">Action</th>-->
<th style="text-align:left;">Service Request ID</th>
<th style="text-align:left;">BlueStar ID</th>
<th style="text-align:left;">Patient ID</th>
<th style="text-align:left;">Patient Name</th>
<th style="text-align:left;">Tier Level</th>
<th style="text-align:left;">Days to date</th>
<th style="text-align:left;">Priority</th>
<th style="text-align:left;">Severity</th>
<th style="text-align:left;">Status</th>
<th style="text-align:left;">Follow-up Date </th>
<th style="text-align:left;">Assign To</th>
</tr>
</thead>
<tbody>
<apex:repeat var="tas" value="{!cases}" id="tableRecords" >
<tr>
<td style="padding-left:5px;text-align:left;"><apex:inputField Value="{!tas.isCaseDeleted__c}">
</apex:inputField>
</td>
<td>
<u><ol><a href="/apex/CustomTicketsave?id={!tas.id}&se={!se}&idValEntr={!idValEntr}¤tURL={!currentURL}" class="tooltip" > {!tas.CaseNumber}
<span>
<apex:pageBlockSection columns="1">
<apex:outputText label="Provider Name">{!tas.Provider__c}</apex:outputText>
<apex:outputText label="SR Type">{!tas.SR_Types__c}</apex:outputText>
<apex:outputText label="Created Date">{!tas.Created_Date__c}</apex:outputText>
<apex:outputText label="Notes/Comments">{!tas.Notes_Commentss__c}</apex:outputText>
</apex:pageBlockSection>
</span>
</a> </ol> </u>
</td>
<td style="padding-left:5px;text-align:left;">
<a href="/apex/patrecords?BsId={!tas.Blue_Star_ID__c}&se={!se}&idValEntr={!idValEntr}¤tURL={!currentURL}" style="{color: blue; background: white;text-decoration: underline}
:visited {color: green}
:hover {background: yellow}
:visited:hover {color: purple}">{!tas.Blue_Star_ID__c}</a>
</td>
<td style="padding-left:5px;text-align:left;">{!tas.Patient_Id__c}</td>
<td style="padding-left:5px;text-align:left;"><apex:outputField Value="{!tas.Patient__c}"/></td>
<td style="padding-left:5px;text-align:left;"><apex:outputfield Value="{!tas.Tier_Level__c}"/></td>
<td style="padding-left:5px;text-align:left;"><apex:outputField Value="{!tas.Days_to_Date_new__c}"/></td>
<td style="padding-left:5px;text-align:left;"><apex:outputField Value="{!tas.Priority__c}"/></td>
<td style="padding-left:5px;text-align:left;"><apex:outputfield Value="{!tas.Severity__c}"/></td>
<!--<td style="padding-left:5px;text-align:left;"><apex:outputfield Value="{!tas.Follow_Up_Date__c}"/></td>-->
<!-- <td style="padding-left:5px;text-align:left;"><apex:outputText value="{0,date,yyyy'-'MM'-'dd}" >
<apex:param value="{!tas.Followup__c}" />
</apex:outputText></td> -->
<td style="padding-left:5px;text-align:left;">{!tas.Status}</td>
<td style="padding-left:5px;text-align:left;"><apex:outputtext Value="{!tas.Followup__c}"/></td>
<td style="padding-left:5px;text-align:left;"><apex:outputField Value="{!tas.Assigned__c}"/></td>
</tr>
</apex:repeat>
</tbody>
</table>
</apex:pageBlock>
</apex:outputPanel>
</apex:form>
<script>
j$ = jQuery.noConflict();
j$(document).ready( function () {
});
});
function testclick() {
$('input[id$=search_val]').val('');
}
</script>
<script type="text/javascript" language="javascript">
if(jQuery) {
jQuery.noConflict();
}
var $jq = jQuery.noConflict();
function testrun() {
cler();
}
$jq('[id$=claim_id]').click(function() {
</script>
</apex:page>