per chi conosce DataTables...

**GK4** · 15-11-2013, 19:57

Ciao a tutti,
Mi servirebbe un plugin che permetta di esportare una tabella in formato pdf.
Cercando in giro ho trovato DataTables (http://datatables.net/).
Purtroppo gli esempi d'uso che ho trovato non sono molto chiari ma ho messo insieme la seguente pagina html:

codice:

<!DOCTYPE html><html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>DataTables TableTools PDF Export</title>


    <link rel="stylesheet" type="text/css" href="DataTables-1.9.4/media/css/demo_page.css" />
    <link rel="stylesheet" type="text/css" href="DataTables-1.9.4/media/css/demo_table.css" />
    <link rel="stylesheet" type="text/css" href="DataTables-1.9.4/extras/TableTools/media/css/TableTools.css" />    
    <link href="DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="DataTables-1.9.4/media/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />
    <link href="DataTables-1.9.4/media/css/demo_table_jui.css" rel="stylesheet" type="text/css" />
    <link href="DataTables-1.9.4/extras/TableTools/media/css/TableTools_JUI.css" rel="stylesheet" type="text/css" />
    <link href="http://datatables.net/media/css/jui_themes/pepper-grinder/jquery-ui-1.7.2.custom.css " rel="stylesheet" type="text/css" />


    <script type="text/javascript" src="DataTables-1.9.4/extras/TableTools/media/js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>    
    <script type='text/javascript'  src="DataTables-1.9.4/extras/TableTools/media/js/TableTools.min.js"></script>
    <script type="text/javascript" src="DataTables-1.9.4/extras/TableTools/media/js/TableTools.js"></script>
    <script type="text/javascript" language="javascript" src="DataTables-1.9.4/media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>


</head>
<body>
 
<script type='text/javascript'>//<![CDATA[
$(document).ready(
function() {
    $('#data-table').dataTable({
        "bJQueryUI":true,
        "aaData":[
            {
                "col0": "John",
                "col1": "Foo",
                "col2": "m",
                "col3": "1981-12-01"
            },
            {
                "col0": "Mike",
                "col1": "Johns",
                "col2": "m",
                "col3": "1991-03-12"
            },
            {
                "col0": "Linda",
                "col1": "Smith",
                "col2": "f",
                "col3": "1973-06-30"
            }
        ],
        "aoColumns":[
            {
                "mDataProp":"col0"
            },
            {
                "mDataProp":"col1"
            },
            {
                "mDataProp":"col2",
                "bVisible":false
            },
            {
                "mDataProp":"col3"
            }
        ],
        "sDom":'T<"clear">lfrtip',
        "oTableTools": {
        
        
        //http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_x#ls_pdf.swf
            "sSwfPath": "DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "print",
                {
                    "sExtends":    "collection",
                    "sButtonText": "Save",
                    "aButtons":    [ "csv", "xls", "pdf" ]
                }
            ]
        }
    });
});//]]>
</script>
 
<h1>DataTables TableTools PDF Export</h1>
<div>
    <table id="data-table">
        <thead>
        <tr>
            <th class="col0">First name</th>
            <th class="col1">Last name</th>
            <th class="col2">Gender</th>
            <th class="col3">Date</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</body>
</html>

Il problema è che non compare la toolbar con i bottoni ne con chrome ne con firefox. Ispezionando la pagina con firebug si vedono 3 errori:

Uncaught ReferenceError: jQuery is not defined ---jquery.dataTables.min.js:154
Uncaught ReferenceError: jQuery is not defined ---TableTools.min.js:76
Uncaught ReferenceError: jQuery is not defined ---TableTools.js:2475

Sembra che non venga caricato correttamente il file di jquery.
Il link che ho messo però fa riferimento al file interno alla cartella scaricata da DataTable per cui non credo abbia problemi di compatibilità.

Spulciando su internet ho solo trovato che jquery.dataTables.js deve essere importato dopo jquery.js altrimenti compare quell'errore. Tuttavia nella mia pagina è già così.

Se qualcuno mi potesse dare una mano gliene sarei grato.

**cavicchiandrea** · 15-11-2013, 20:03

Ma lo stai testato in locale (sul tuo pc) o online?

**U235** · 15-11-2013, 22:21

Originariamente inviata da GK4

Ciao a tutti,
Mi servirebbe un plugin che permetta di esportare una tabella in formato pdf.
Cercando in giro ho trovato DataTables (http://datatables.net/).
Purtroppo gli esempi d'uso che ho trovato non sono molto chiari ma ho messo insieme la seguente pagina html:

codice:

<!DOCTYPE html><html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>DataTables TableTools PDF Export</title>


    <link rel="stylesheet" type="text/css" href="DataTables-1.9.4/media/css/demo_page.css" />
    <link rel="stylesheet" type="text/css" href="DataTables-1.9.4/media/css/demo_table.css" />
    <link rel="stylesheet" type="text/css" href="DataTables-1.9.4/extras/TableTools/media/css/TableTools.css" />    
    <link href="DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="DataTables-1.9.4/media/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />
    <link href="DataTables-1.9.4/media/css/demo_table_jui.css" rel="stylesheet" type="text/css" />
    <link href="DataTables-1.9.4/extras/TableTools/media/css/TableTools_JUI.css" rel="stylesheet" type="text/css" />
    <link href="http://datatables.net/media/css/jui_themes/pepper-grinder/jquery-ui-1.7.2.custom.css " rel="stylesheet" type="text/css" />


    <script type="text/javascript" src="DataTables-1.9.4/extras/TableTools/media/js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>    
    <script type='text/javascript'  src="DataTables-1.9.4/extras/TableTools/media/js/TableTools.min.js"></script>
    <script type="text/javascript" src="DataTables-1.9.4/extras/TableTools/media/js/TableTools.js"></script>
    <script type="text/javascript" language="javascript" src="DataTables-1.9.4/media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>


</head>
<body>
 
<script type='text/javascript'>//<![CDATA[
$(document).ready(
function() {
    $('#data-table').dataTable({
        "bJQueryUI":true,
        "aaData":[
            {
                "col0": "John",
                "col1": "Foo",
                "col2": "m",
                "col3": "1981-12-01"
            },
            {
                "col0": "Mike",
                "col1": "Johns",
                "col2": "m",
                "col3": "1991-03-12"
            },
            {
                "col0": "Linda",
                "col1": "Smith",
                "col2": "f",
                "col3": "1973-06-30"
            }
        ],
        "aoColumns":[
            {
                "mDataProp":"col0"
            },
            {
                "mDataProp":"col1"
            },
            {
                "mDataProp":"col2",
                "bVisible":false
            },
            {
                "mDataProp":"col3"
            }
        ],
        "sDom":'T<"clear">lfrtip',
        "oTableTools": {
        
        
        //http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_x#ls_pdf.swf
            "sSwfPath": "DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "print",
                {
                    "sExtends":    "collection",
                    "sButtonText": "Save",
                    "aButtons":    [ "csv", "xls", "pdf" ]
                }
            ]
        }
    });
});//]]>
</script>
 
<h1>DataTables TableTools PDF Export</h1>
<div>
    <table id="data-table">
        <thead>
        <tr>
            <th class="col0">First name</th>
            <th class="col1">Last name</th>
            <th class="col2">Gender</th>
            <th class="col3">Date</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</body>
</html>

Il problema è che non compare la toolbar con i bottoni ne con chrome ne con firefox. Ispezionando la pagina con firebug si vedono 3 errori:

Uncaught ReferenceError: jQuery is not defined ---jquery.dataTables.min.js:154
Uncaught ReferenceError: jQuery is not defined ---TableTools.min.js:76
Uncaught ReferenceError: jQuery is not defined ---TableTools.js:2475

Sembra che non venga caricato correttamente il file di jquery.
Il link che ho messo però fa riferimento al file interno alla cartella scaricata da DataTable per cui non credo abbia problemi di compatibilità.

Spulciando su internet ho solo trovato che jquery.dataTables.js deve essere importato dopo jquery.js altrimenti compare quell'errore. Tuttavia nella mia pagina è già così.

Se qualcuno mi potesse dare una mano gliene sarei grato.

Ciao,
io vedo che nel codice che hai postato jquery.js sta dopo TableTools.js e dopo jquery.dataTables.min.js... dovrebbe essere prima...

**GK4** · 16-11-2013, 00:02

Scusate oggi al lavoro è stata una giornata pesante

Dunque ho spostato l'import di jquery in testa a tutto e modificato il codice con:

codice:

"oTableTools": {
        


            "sSwfPath": "DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "pdf",
                    "sButtonText": "Save to PDF"
                },
                {
                    "sExtends": "csv",
                    "sButtonText": "Save to CSV"
                },
                {
                    "sExtends": "xls",
                    "sButtonText": "Save to Excel"
                }
            ]
        }

In effetti i 3 bottoni compaiono, risultano cliccabili, ma non succede nulla

Qualche idea?

**GK4** · 16-11-2013, 12:19

Ho scoperto di non essere il solo ad avere questo problema.

Ho trovato che altri hanno risolto inserendo:

codice:

$(function(){	$("#data-table").tabs({
		show: function(ui, event) {
			ttInstances = TableTools.fnGetMasters();
			for (i in ttInstances) {
				if (ttInstances[i].that.fnResizeRequired()) ttInstances[i].that.fnResizeButtons();
			}
		}
	});
});

Il mio problema è che la funzione tabs risulta un comando non conosciuto.
Ho provato quindi a importare jquery 1.10.2 ma il problema permane.

Ma lo stai testato in locale (sul tuo pc) o online?

Questo test lo sto facendo in locale, vuoi dire che su un sito pubblicato i bottoni funzionerebbero?

**GK4** · 16-11-2013, 12:31

Avevi ragione, in eclipse funziona correttamente, non credevo.

Chiudete pure il topic, grazie di tutto

Discussione: per chi conosce DataTables...

Strumenti discussione

Ricerca discussione

Visualizza

per chi conosce DataTables...

Permessi di invio