1

I've just recently started incorporating jQuery into my Visualforce pages in form of the Datatable plugin. It's worked very well so far, but I'm running into a problem when I need to rerender the table. On the command button that rerenders the table, I have an onComplete action that recalls the datatable function so that the datatable format is reapplied. Unfortunately, I can't figure out how to get it to stop creating a series of nested data tables every time the onComplete action runs.

Nested Talbes Bad

Here's my Visualforce page up to where the table is initiated.

<apex:page showHeader="true" sidebar="true" standardController="Project_Plan__c" extensions="projectPlan">
<head>
    <apex:stylesheet value="https://fonts.googleapis.com/css?family=Lato" />
    <apex:includeScript value="https://code.jquery.com/jquery-1.11.1.min.js"/>
    <apex:includeScript value="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"/>
    <apex:stylesheet value="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"/>
    <script>
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
            doTable();
            });
        function doTable() {
            j$('[id$="projDates"]').DataTable({
            scrollY:        "500px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         false
            });
        }
    </script>
</head>
<apex:sectionHeader title="{!Project_Plan__c.name}"/>
<apex:pageMessages />
<apex:form >
    <apex:pageBlock title="Project Plan Tasks" id="projTasks">
        <apex:pageBlockButtons >
            <apex:commandButton value="Add Task" action="{!addTask}" reRender="projDates" oncomplete="doTable()" />
            <apex:commandButton value="Delete Tasks" action="{!delTask}" reRender="projDates" oncomplete="doTable()" />
            <apex:commandButton value="Select All" action="{!selectAll}" rerender="projDates" oncomplete="doTable()" />
            <apex:commandButton value="Save Tasks" action="{!saveTasks}" reRender="projDates" oncomplete="doTable()" />
            <apex:commandButton value="Import CSV" action="/apex/ProjectPlanImport"/>
        </apex:pageBlockButtons>
        <apex:datatable value="{!ppTasks}" var="p" id="projDates">
  • have you tried destroying the table and redrawing it again by setting "destroy": true in the datatable config? – Praveen Jul 15 '16 at 17:35
  • I tried the following syntax: 'function doTable() {' j$('[id$="projDates"]').DataTable({ "destroy": true, scrollY: "500px", scrollX: true, scrollCollapse: true, paging: false }); } But it didn't work for me. I was still getting the nested table on each refresh. Was using the destroy setting correctly? – Jason Kelley Jul 15 '16 at 20:19
  • Jason Kelley, did the answer solve your issue? – Praveen Jul 18 '16 at 12:26
1

Rerendering the <apex:pageBlock /> instead of <apex:datatable /> would solve the nested table issue.

  • He's using the jQuery datatable plugin - no relation to an apex:dataTable – Caspar Harmer Jul 17 '16 at 21:28
  • I was able to reproduce the same issue by using jquery datatable and apex: datatable , and solved the issue by trying the above answer – Praveen Jul 18 '16 at 3:09
1

Try using HTML table instead of apex:datatable.

0

Thank you everyone for your comments and suggestions! I got this working on Friday by reinintializing the jQuery table with the exact code I used on page load. I swear I had tried this exact tactic prior to posting, but I tried it again and it worked.

        <script>
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
            var table = j$('[id$="projDates"]').DataTable({
            scrollY:        "500px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         false
            });
        });
        function reinitializeDataTable() {
            var table = j$('[id$="projDates"]').DataTable({
            scrollY:        "500px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         false
            });
        }
    </script>
</head>
<apex:sectionHeader title="{!Project_Plan__c.name}"/>
<apex:pageMessages />
<apex:form >
    <apex:pageBlock title="Project Plan Tasks" id="projTasks">
        <apex:pageBlockButtons >
            <apex:commandButton value="Add Task" action="{!addTask}" reRender="projTasks" oncomplete="reinitializeDataTable()"/>
            <apex:commandButton value="Delete Tasks" action="{!delTask}" reRender="projTasks" oncomplete="reinitializeDataTable()"/>
            <apex:commandButton value="Select All" action="{!selectAll}" rerender="projTasks" oncomplete="reinitializeDataTable()"/>
            <apex:commandButton value="Save Tasks" action="{!saveTasks}" reRender="projTasks" oncomplete="reinitializeDataTable()"/>
            <apex:commandButton value="Import CSV" action="/apex/ProjectPlanImport"/>
        </apex:pageBlockButtons>
  • Jason, seem like my answer solved the issue. But am not sure why it didn't work in the first place.Could you accept the appropriate answer, so that we can help others to find the correct answer. – Praveen Jul 18 '16 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.