1

We are trying to use dataTable collapsible feature https://www.datatables.net/examples/api/row_details.html

The problem is that we don't want to use VF remoting and we are looking for something that we can pick up from the page like a column with the id as hidden or something like that.

Any help will be great !

here is my script

$(document).ready(function() {
    reloadTable();
    $('#collapsableTableDiv').hide();
});

function reloadTable(){
    $('#eventTable').DataTable({
    "dom": '<"top"i>rt<"bottom"flp><"clear">',
        "bFilter": false,

        "bLengthChange": false
    });
}

and here is the table

<table  id="eventTable" class="display" cellspacing="0" width="100%" style="margin-top: 24px;" >

            <thead>
                <tr>
                    <th id="globalHead">
                        <input id="SelectAll" type="checkbox" />
                    </th>
                    <th id="Start Date">Start Date</th>
                    <th id="Start Time">Start Time</th>
                    <th id="Sector">Sector</th>
                    <th id="Title">Title</th>
                    <th id="Ticker">Ticker</th>
                </tr>
           </thead>
            <apex:repeat var="r" value="{!eventList}" >
                <tr >
                    <td>
                      <input type="checkBox" id="checkBoxIds" onclick="showHideCollapsableTable(this.checked);"/>
                          <div id="collapsableTableDiv">
                              <table id="test">
                              <tr>
                              <td>asasasasaas</td>
                              </tr><tr><td>asasasasaas</td></tr><td>asasasasaas</td><tr><td>asasasasaas</td></tr><tr></tr>
                              </table>
                          </div> 
                    </td>
                    <td >
                        <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                            <apex:param value="{!r.Start_Date_Time__c}" /> 
                        </apex:outputText>
                    </td>
                    <td >
                        {!r.Start_Time__c}
                    </td>
                    <td id="categories">
                         {!r.Topic_Categories__c}
                    </td>
                    <td id="testColumn">
                        {!r.Name}
                    </td>
                    <td >
                         {!r.Ticker__c}
                    </td>
                </tr>

            </apex:repeat>          
        </table>

Now what we have achieved is that adding another table under a row which appears and disappears when the checkbox is clicked i.e

function showHideCollapsableTable(checked) {
    if (checked == false) {
        $('#collapsableTableDiv').hide();
    } else {
        $('#collapsableTableDiv').show();
    }
}

but the output is not very nice !

  • This question is really about the functionality of datatables.net not salesforce. That said, you don't need to use VF remoting to get the data for the child rows. What have you tried? Where are you stuck? – Mark Pond Jun 16 '15 at 15:44
  • Thanks @MarkPond for stoping by.Here is the problem I cannot figure out the way to put in the columns.Although this is preety simple with normal dataTable I mean I just need to $('#example').DataTable(); and I have a dataTable.Can you please help me with the code to put one column under the {+} image. – Piyush Singhal Jun 16 '15 at 18:38
  • You are correct, calling the datatable method on an element in the DOM is trivial. At the moment it looks like you're just asking me to do the complicated part your work for you. I still haven't seen any code showing where you are stuck and what you've tried. I'm happy to help, just not like that. – Mark Pond Jun 16 '15 at 18:44
  • Thts fair.I have updated the code above in my defence :D – Piyush Singhal Jun 16 '15 at 20:10
  • I think this one answers my question a bit ! Stay tuned i will post the completed code ! stackoverflow.com/questions/11841486/… – Piyush Singhal Jun 17 '15 at 12:47

Your Answer

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

Browse other questions tagged or ask your own question.