jQuery dataTables - TableTools not working

Question

I'm using http://datatables.net/extensions/tabletools/ in my local-host ( wamp server ). It's working fine, but when I put the same code on my online server, it isn't working.

I am using all latest version of datatables

tableTools: {
    "sSwfPath": "https://datatables.net/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
    "sRowSelect": "os",
    "sRowSelector": 'td:first-child',
    // "aButtons": [ "copy", "csv", "xls","pdf","print","select_all", "select_none" ]
    "aButtons": [
        "copy",
        "print", {
            "sExtends": "collection",
            "sButtonText": "Save", // button name 
            // "aButtons":    [ "csv", "xls", "pdf" ]
            "aButtons": [
                "csv",
                "xls", {
                    "sExtends": "pdf",
                    "sPdfOrientation": "landscape",
                    "sPdfMessage": "List of product."
                },
                "print"
            ]
        }
    ]
}    

Firstly there was no click on copy, pdf, csv, xls button. Hence I taught my path or swf is not working hence I replaced the link with online link. Hence now I get click, but when I click Copy button it gives me a message ... but when I past in my notepad it's giving me "blank ". Also my pdf, csv, xlsx is not working. Only Print is working perfect. Please let me know what is the issue as in my localhost all is working fine. Its creating issues in my online server.

Answer 1

I am pretty sure that datatables.net actively is blocking for use of the .swf. Allan Jardine has commented the direct use of the .swf files several times :

datatables.net is not a CDN server and should not be used as such. It is not designed to be, and I might add throttling for hotlinking in future as a huge amount of bandwidth is being used and causing unnecessary load. You'll get much better performance from using a proper CDN or even a locally hosted file.

However, with the introduction of 1.10.x there is finally established a real CDN server, including all the TableTools resources -> http://cdn.datatables.net/tabletools/2.2.2/

So replace the sSwfPath with :

http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf

Answer 2

As i want to show proper code format hence post as new answer

@ DAVIDKONRAD : i got to know when i remove columnDefs from below code then my PDF shows proper records ... btw my csv , excel , print diplay proper record with columnDefs .. only pdf is not showing proper record with "columnDefs"

and i got to know the word which is seen " select " is because of that only ..as i have use dropdown in columndefs

 dt = $('#example').DataTable( {
            "dom": '<"clear">T<"clear"><"clear">lfrtip',
            "pagingType": "full_numbers",
            "scrollY": "440px",
            "scrollX": "100%",
            "scrollCollapse": true,
            "bProcessing": true, 
            "bServerSide": true,
            "sAjaxSource": "includes/db/server_processing.php",
             "deferRender": true,
            "aaSorting":[[0, "desc"]],
            "aoColumns": [ 
                            { className: "center", },
                            { className: "center", },
                            { className: "center", },
                            { className: "center", },
                            { className: "center", },
                            { className: "center", },
                            { className: "center", },
                               ],
            "columnDefs": [

                            {
                                "aTargets":[7],
                                "fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
                                {
                                $(nTd).css('text-align', 'center');
                                },
                                "mData": null,
                                "mRender": function( data, type, full) {    
                                           return '<td><select id="dynamic_select_'+full[0]+'" name="dynamic_select_'+full[0]+'">\n\
                                                 <option id="0" value="">Select</option/>\n\
                                                 <option id="1_'+full[0]+'" value="test.php?id='+full[0]+'">10</option/>\n\
                                                 <option id="2_'+full[0]+'" value="test2.php?id='+full[0]+'">12</option/>\n\
                                                 <option id="3_'+full[0]+'" value="test3.php?id='+full[0]+'">13</option/>\n\
                                                  </select></td>'; 
                                            //return '<button>Click!</button>';

                                 }

                                },
                              {   
                                "aTargets":[8],
                                "fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
                                {
                                $(nTd).css('text-align', 'center');
                                },
                                "mData": null, 
                                "mRender": function(data, type, full){
                                 //return '<button>Click!</button>';
                                 return '<div id="container"><a href="javascript: void(0);" class="click_'+full[0]+'">Click</a></div>';
                                }
                              }
                           ]
        } );

Answer 3

I meant you should post it as a completely new question, since it in fact is a new question! :) Anyway. The problem is, that you'll need to render the data, when you produce a PDF. Otherwise you will just get some $(element).text() output, including the select and its options. Like this :

 "aButtons": [ 
      "copy", 
      "csv", 
      "xls",
      { "sExtends":  "pdf",
        "fnCellRender": function ( sValue, iColumn, nTr, iDataIndex ) {
           //extract the value of the select  
           if ( iColumn === 7 ) {
              var val=$(sValue).find('select').val(); 
              return (val!=='') ? val : 'not set';
           }
           //create a dummy text for the HTML-link
           if ( iColumn === 8 ) {
              return 'click';
           }
           return sValue;
         }
      },
      "print",
      "select_all", 
      "select_none" 
  ]

see your code here (as close I can get) -> http://jsfiddle.net/3F8ZJ/. However, you still have a problem caused by your mRender rendering, so the column positions is messing up. It breaks the internal <table>-structure. Why are you inserting extra <td>..</td>? But have not time to look into this at the moment.