Sign Up ›
  • Tom Dambra
  • NEWBIE
  • 0 Points
  • Member since 2014
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 2
    Replies
2 replies

Pagination Inline Edit using datatable in VF Page

Hi,

In my VF page i am using pagination using data tables. Datatable is working fine in pageblock table. And also i need to implement inline edit option in the datatable. When i edit any column using inline editor its working fine in 1st page. When i move to second page and next pages, inline edit option is not working. Please help to fix the code.

/* Datatable code */
j$ = jQuery.noConflict();
        var editor;    
        j$(document).ready( function () {
           var Searchtable1 = j$('[id$="Table1"]').DataTable({                                
          })


/* VF Page block table */

<apex:pageblock id="pgblk3" rendered="{!EditAll}" title="Edit All Line items">
      <apex:pageblockbuttons >
        <apex:commandbutton value="Save" action="{!SaveEditItems}" id="savebutton"/>
        <apex:commandbutton value="Cancel" action="{!cancelbton}" id="cancelbutton"/>
      </apex:pageblockbuttons>
        <apex:pageblocktable title="Edit Study Country Budget Items" value="{!EditAllItems}" var="scl" id="Table1">              
          <apex:column headerValue="Budget Item Id">         
             <apex:outputfield value="{!scl.Name}"/>                    
          </apex:column>         
       
         <apex:column headerValue="Description">
          <apex:actionregion >
             <apex:outputfield value="{!scl.Description__c}">
               <apex:inlineEditSupport event="ondblClick" showOnEdit="savebutton,cancelbutton" />
             </apex:outputfield> 
             </apex:actionregion>
         </apex:column>
                       
          <apex:column headerValue="Budget Library">
           <apex:actionregion >
             <apex:outputfield value="{!scl.Budget_Library__c}">
               <apex:inlineEditSupport event="ondblClick" showOnEdit="savebutton,cancelbutton" />
             </apex:outputfield>
            </apex:actionregion>
         </apex:column>
         
         <apex:column headerValue="Estimated Cost Max">
           <apex:actionregion >
            <apex:outputfield value="{!scl.Estimated_Cost_Max__c}">
             <apex:inlineEditSupport event="ondblClick" showOnEdit="savebutton,cancelbutton" />
            </apex:outputfield>
           </apex:actionregion>
         </apex:column>
         
         <apex:column headerValue="Estimated Cost Min">
           <apex:actionregion >
             <apex:outputfield value="{!scl.Estimated_Cost_Min__c}">
               <apex:inlineEditSupport event="ondblClick" showOnEdit="savebutton,cancelbutton" />
             </apex:outputfield>
            </apex:actionregion>
         </apex:column>
      </apex:pageblocktable>
    </apex:pageblock>


 
1 replies

Inline edit works on 1st page not on 2nd using javascript 

<apex:page standardController="Opportunity" Extensions="OptyProduct" >
    <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / > 
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> 
      
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
        <script>
            j$ = jQuery.noConflict();
            j$(document).ready( function () {
                var contactTable = j$('[id$="contacttable"]').DataTable({
                "lengthMenu": [[5], []],
                    "bLengthChange": false,
                    "bFilter": false,
                    "bInfo": false,
                    "bAutoWidth": false,
                    order: [[2, 'asc']], 
                     "aLengthMenu": [[5], [5]],      
                   order: [[2, 'asc']],
                    initComplete: function() {
                        var api = this.api();
                        var select = j$('[id$=accountSelect]');
                        api.column(0).data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );   
                    }
                });
                  
            });
        </script>
    </head>
    <body> 
    <apex:form >

HI I am using the above Javascript and pagination works fine, However, When I try to edit on the resulting columns , I can edit the first page
When I navigate to  second page inline edit seems like lock

Any ideas?