Discussion :

[Fredo8]

Bonjour,

J'ai récupérer ce script JS pour exporter les données d'un tableau HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	<div id="dvData">
	<table id="table_result" border="2">   
		<tr bgcolor="oldlace">	
			<th class=""></th>
			<th colspan="2">Distribution for all categories entityX by sphereN / all sphere all entities</th> 		 
			<th colspan="2">distribution for all categories for each entity by sphereN</th>    
		</tr> 
		<tr bgcolor="oldlace">		  
			<th class=""><div class=“highlight_rankEntity”><a href="index.php?id=recherche_ent">Entity</a></div></th> 		 
			<th class="">Inside</th>  
			<th class="">Outside</th>	
			<th class="">Inside</th>  
			<th class="">Outside</th>	
		</tr> 
                <tr>
                         <td> contruction dynamique </td>
                </tr>
	</table>  	  
	</div>
	<a href="#" class="export">Export Table data into Excel</a>

Et coté JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$(document).ready(function () {
 
    function exportTableToCSV($table, filename) {
 
        var $rows = $table.find('tr:has(td)'),
 
            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character
 
            // actual delimiter characters for CSV format
            colDelim = '";"',
            rowDelim = '"\r\n"',
 
            // Grab text from table into CSV formatted string
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),			 
					//$cols = $row.find('th');
                    $cols = $row.find('td');
 
                return $cols.map(function (j, col) {
                    var $col = $(col),
                        text = $col.text();
 
                    return text.replace(/"/g, '""'); // escape double quotes
 
                }).get().join(tmpColDelim);
 
            }).get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim) + '"',
 
            // Data URI
            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
 
        $(this)
            .attr({
            'download': filename,
                'href': csvData,
                'target': '_blank'
        });
    }
 
    // This must be a hyperlink
    $(".export").on('click', function (event) {
        // CSV
        exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);
 
        // IF CSV, don't do event.preventDefault() or return false
        // We actually need this to be a typical hyperlink
    });
});

2 problèmes :

1/ les balise "titre" <th> ne sont pas prise en compte, comment faire pour les prendre en compte ?
2/ comment faire pour utiliser ce script sur plusieurs tableau dans la même page ?

Merci

[SpaceFrog]

1)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$cols = $row.find('td');

faut lui faire finder le th aussi

2)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

exportTableToCSV($table, filename)

tu passes le table en param ...
Boucle sur la collections de tables de la page ...

[Fredo8]

1/ Oui, j'ai vu ça, j'avais tester en remplaçant TD par TH ça marche mais bien sur exporte que les th.
2 endroits :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var $rows = $table.find('tr:has(td)'),
[...]
$cols = $row.find('td');

Mais comment faire pour rajouter la gestion du th ? Faut tout dupliquer ?

2/ tester aussi mais ça ne marche pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="export" onclick="exportTableToCSV('dvData>table', 'export.csv');">Export Table data into Excel</a>

J'ai tester différent chose dans les paramètres, mais quand je click rien se passe.

J'ai virer aussi ceci dans la partie JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    // This must be a hyperlink
    $(".export").on('click', function (event) {
        // CSV
        exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);
 
        // IF CSV, don't do event.preventDefault() or return false
        // We actually need this to be a typical hyperlink
    });

Après, je ne sais pas a quoi sert ceci, si a garder ou pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).ready(function () {

[SpaceFrog]

As tu testé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$cols = $row.find('th, td');

[Fredo8]

Ca marche mais avec cela aussi : var $rows = $table.find('tr:has(th,td)'),
Merci

Par contre, ça ne prends pas en compte le colspan, moins gênant mais si y a un petit truc a faire pour que ça soit gérer suis intéressé.


Reste plus a trouvé comment appelé la fonction avec les bon paramètres.

[Fredo8]

J'ai testé plusieurs chose pour appeler la fonction pour chaque tableau dont ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a href="#" class="export" onclick="exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);">Export Table data into Excel</a>	
 
<a href="#" class="export" onclick="exportTableToCSV($('#dvData>table'), 'export.csv');">Export Table data into Excel</a>

Mais rien se passe.