0

I've created a VF page and using jquery pagination. Created some custom functionality using jquery. But that jquery functionality only working for records which are loading on the first page. when I goto the second page, jquery functionality is not working.

Code :

<apex:page controller="wrapperclass2">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
<apex:includescript value=" //cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" />
<apex:stylesheet value="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />


<script>
    $(document).ready(function() {

        $('table.dataTable').dataTable({}); 

        $('.memo').closest('tr').find('.gold').click(function() {
               $(this).closest('tr').find('.gold').not(this).prop('checked', false);
        });

        $('.memo').closest('tr').find('.first').click(function() {
            $(this).closest('tr').find('.second').prop('checked', false);
        });

        $('.memo').closest('tr').find('.second').click(function() {
            $(this).closest('tr').find('.first').prop('checked', false);
       });
    });
</script>


<apex:pageBlock >
<apex:form >
    <apex:pageBlockTable value="{!lstAccWrapper}" id="accountId" var="a1" styleClass="dataTable">

        <apex:column styleClass="" headerValue="Name">
            <apex:outputText value="{!a1.Name}" />
        </apex:column>

        <apex:column styleClass="memo" headerValue=" Gold">
            <apex:inputCheckbox value="{!a1.slaG}" styleClass="first" id="gggold"/>
        </apex:column>
         <apex:column styleClass="memo" headerValue="Silver">
            <apex:inputCheckbox value="{!a1.slaS}" styleClass="gold"/>
        </apex:column>
         <apex:column styleClass="memo" headerValue="Platinum">
            <apex:inputCheckbox value="{!a1.slaP}" styleClass="gold"/>
        </apex:column>
         <apex:column styleClass="memo" headerValue="Bonze">
            <apex:inputCheckbox value="{!a1.slaB}"  styleClass="gold second" />
        </apex:column>

        <apex:column styleClass="memo" headerValue="SLA Bonddze">
            <apex:inputCheckbox value="{!a1.slaRAdioB}" styleClass="gold second"/>
        </apex:column>
        <apex:column styleClass="memo" headerValue="test">
            <apex:inputCheckbox value="{!test}" styleClass="gold second"/>
        </apex:column>

    </apex:pageBlockTable>
     </apex:form>
</apex:pageBlock>

I've referred many article but didn't get which class/id I've to use and how?

This question asked here because it takes the component id of pageblock.


I've added two lines of code as

 $('tr').on('click',function(){

}):

So, Script will be

<script>
    $(document).ready(function() {

        $('table.dataTable').dataTable({}); 

        $('tr').on('click',function(){
        $('.memo').closest('tr').find('.gold').click(function() {
               $(this).closest('tr').find('.gold').not(this).prop('checked', false);
        });

        $('.memo').closest('tr').find('.first').click(function() {
            $(this).closest('tr').find('.second').prop('checked', false);
        });

        $('.memo').closest('tr').find('.second').click(function() {
            $(this).closest('tr').find('.first').prop('checked', false);
       });
       });
    });
</script>

3 Answers 3

2

The problem is likely to be that the $(document).ready runs when the overall page is loaded but not when DataTables (though I don't see much of that in the posted code) brings in the next page.

Search the DataTables documentation for how to run some JavaScript code once the next page has rendered. From a cursory look this may do it:

$('table.dataTable').bind('page', function () {
    // Call same code as for ready here
});
1
  • I've used my answer as logic for my requirement. but it has one problem. When page loads some checkbox is checked from controller. now for first click within page my jquery logic is not wokring. first click can be anywhere either on checkbox or other place. but on Second click onwards jquery logic is working perfect. what could be issue. can you please help.
    – Amol
    Jun 10, 2018 at 19:40
0

I was having the same issue with data-table of JQuery.I found a solution for it. If you will place the code of JQuery outside the "Documen.ready" function then your JQuery script will work for all the pages of dada-table.

<script>

 $('.edit').on('click',function(){
      var id = $(this).attr('id');  
      $.ajax({

        type:'get',
        url:'{{url("updatebloodgroup")}}',
        data:{idd:id},
        success:function(data){
         $('#base_data_country').val(data.title);
         $('#id').val(data.id);
         $('#submit').attr('value','Update');
         $('.submit_form').attr('action','{{url("updatebloodgroup")}}');
        }
      });
    });
$(document).ready(function() {
    $('#basedata_table').DataTable();   
});
      </script>

when the document is ready,by default 10 rows are in table's first page,so the jquery script is ready to use but just for the 10 rows,and not for the records of next pages.to make the script work for all the records whuich are on next page,place the script outside the "$(document).ready" function.Hoping it will work.

0

Use the draw callback.

Example:

$('#example').dataTable( {
    "drawCallback": function( settings ) {
        alert( 'DataTables has redrawn the table' );
    }
} );

https://datatables.net/reference/option/drawCallback

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .