3

i am trying to use TableTools plugin for the datatable to export the data that is being displayed in the table as CSV, Excel, etc. Though i included the plugin inside of my code it still did not recognize and i am not able to see it on the screen. Already have datatables working in my vf page. I am trying to use simple initialization example as given in this link. Does anyone has experience and implemented TableTools? Can please share their ideas?

http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html

Visualforce page:

    <apex:page standardController="Account" extensions="OpenDocumentsController" readOnly="true" showHeader="false" sidebar="false">
<apex:stylesheet value="{!URLFOR($Resource.jQueryDataTablesZip, 'css/jquery.dataTables.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.TableToolsZip, 'css/dataTables.tableTools.css')}"/>
<style type="text/css">
.sorting {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_both.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_asc {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_asc.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_desc {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_desc.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_asc_disabled {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_asc_disabled.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
.sorting_desc_disabled {
    background: #f2f3f3 url('{! URLFOR($Resource.jQueryDataTablesZip, 'images/sort_desc_disabled.png') }') no-repeat center right !important;
    padding-right: 20px !important;
}
table.dataTable tr.odd { background-color: white; }
table.dataTable tr.even { background-color: white; }
table.dataTable tr.odd td.sorting_1 { background-color: white; }
table.dataTable tr.odd td.sorting_2 { background-color: white; }
table.dataTable tr.odd td.sorting_3 { background-color: white; }
table.dataTable tr.even td.sorting_1 { background-color: white; }
table.dataTable tr.even td.sorting_2 { background-color: white; }
table.dataTable tr.even td.sorting_3 { background-color: white; }
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    padding: 10px;
}
</style>

    <c:LoadingBox />
    <style>
    .clsCenter{text-align:center;}
    .clsRight{text-align:right;}
    </style>


    <head>
    </head>

    <body>

    <apex:pageMessages />
    <apex:form id="myForm">

    <div id="content" style="float:left;width:60%">
        <apex:commandButton action="{!ViewOpenSalesOrders}" value="Open Sales Orders" id="btnOpenOrders" style="{!(If(displayOpenSalesOrders,'color:red;','color:black;'))}" status="loadStatus" rerender="myForm"/>
        <apex:commandButton action="{!ViewOpenDeliveries}" value="Open Deliveries" id="btnOpenDelivery" style="{!(If(displayOpenDeliveries,'color:red;','color:black;'))}" status="loadStatus" rerender="myForm"/>
        <apex:commandButton action="{!ViewOpenInvoices}" value="Open Invoices" id="btnOpenInvoices" style="{!(If(displayOpenInvoices,'color:red;','color:black;'))}" status="loadStatus" rerender="myForm"/>
        <apex:commandButton action="{!ViewARNotes}" value="Account Receivable Notes" id="btnARNote" style="{!(If(displayARText,'color:red;','color:black;'))}" status="loadStatus" rerender="myForm"/>
    </div>

    <div style="width:100%">
        <apex:pageBlock title="Open Sales Orders" rendered="{!displayOpenSalesOrders}">
            <apex:pageBlockSection columns="1">
                <apex:outputText label="Number of Sales Orders" value="{!NumOf}" id="noof"/>            
                <apex:outputText label="Total Amount" id="totalamount" value="{0,number,0.00}">
                    <apex:param value="{!TotalAmount}" />
                </apex:outputText>
            </apex:pageBlockSection>
            <apex:pageBlockTable value="{!OpenSalesOrders}" var="so"  styleClass="dataTable">
                <apex:column headerValue="Order #" value="{!so.OrderNo}"/>
                <apex:column headerValue="Document Date">
                    <apex:outputText value="{0,date,MM/dd/yyyy}">
                        <apex:param value="{!so.DocumentDate}" />
                    </apex:outputText>
                </apex:column>

                <apex:column headerValue="Purchase Order #" style="width:10%;" value="{!so.PurchaseOrderNo}"/>
                <apex:column headerValue="Sales Org" style="width:10%;" value="{!so.SalesOrg}"/>
                <apex:column headerValue="Amount" style="text-align:right;width:10%;" value="{!so.Amount}"/>
                <apex:column headerValue="Currency" style="text-align:center;" value="{!so.Curren}"/>
                <apex:column headerValue="Products" style="width:30%;" value="{!so.Product}"/>
            </apex:pageBlockTable>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.js')}"></script>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.dataTables.js')}"></script>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/dataTables.tableTools.js')}"></script>
            <script type="text/javascript" language="javascript">
            var j$ = jQuery.noConflict();
            j$('table.dataTable').dataTable({
                sPaginationType: "full_numbers"
            });

            var oTableTools = new TableTools( dataTable, {
        "sSwfPath" : "{!URLFOR($Resource.TableToolsZip, 'swf/ZeroClipboard.swf')}",
        "buttons": [
                    "copy",
                    "csv",
                    "xls",
                    "pdf",
                    { "type": "print", "buttonText": "Print me!" }
                   ]
      });
            j$('#content').before( oTableTools.dom.container );

            </script>  

        </apex:pageBlock>

Update:

enter image description here

1

2 Answers 2

2

I don't know if you fixed this this issue or not but the code below works, change your sSwfPath. Let me know I can help you with this, I already spent a lot of time using all the plugins from data tools.

      var table = $('#mytable').dataTable({ YOUR OPTIONS});
       var tableTools = new $.fn.dataTable.TableTools(table, {
               "buttons": ["copy",
                                  "csv",
                                  "xls",
                                  "pdf",{ "type": "print", "buttonText": "Print me!" } ],
                                  "sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf" });
           $(tableTools.fnContainer()).prependTo('#mytable_wrapper');
1
  • Thanks @Carlos. No, I didnt use this tool but done it through controller code. It seems your code should work. I am going to upvote and mark this as an answer so that it could be useful to someone.
    – Bforce
    Commented Sep 23, 2014 at 20:39
2

You need to assign the data table to an object and pass that into the TableTools initialization. I.E.

var oTable = j$('table.dataTable').dataTable({
                sPaginationType: "full_numbers"
            });

            var oTableTools = new TableTools( oTable, {
1
  • Hi @Eric, not i am getting the export menu but not swf menu.The menu what i am getting is looking like a text link and when i clicked nothing happened. please see the updated question with screen shot. Any idea what could be the issue?
    – Bforce
    Commented May 12, 2014 at 17:58

You must log in to answer this question.

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