Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung des Codebeispiels für den JQuery-Export von Daten in Excel

Detaillierte Erläuterung des Codebeispiels für den JQuery-Export von Daten in Excel

伊谢尔伦
伊谢尔伦Original
2017-07-22 09:25:592482Durchsuche

DataTables ist ein jQuery-Tabellen-Plug-in. Dabei handelt es sich um ein hochflexibles Tool, das auf progressiven Verbesserungen basiert und erweiterte interaktive Steuerelemente und Unterstützung für jedes HTML-Formular hinzufügt. Hauptmerkmale:

Es ist jedoch schade, dass die offizielle Website-Tabellendaten-Exportmethode das Tabletools-Plug-In verwendet, das Flash zum Exportieren von Daten verwendet und chinesische Daten nicht unterstützt Offizielle API und Informationen, ich habe die Verwendung von JQuery und der PHP-Exportdatenmethode gefunden.

Javascript-Funktion zum Exportieren von Daten


function table2csv(oTable, exportmode, tableElm) { 
    var csv = ''; 
    var headers = []; 
    var rows = []; 
    // Get header names 
    $(tableElm+' thead').find('th').each(function() { 
      var $th = $(this); 
      var text = $th.text(); 
      var header = '"' + text + '"'; 
      // headers.push(header); // original code 
      if(text != "") headers.push(header); // actually datatables seems to copy my original headers so there ist an amount of TH cells which are empty 
    }); 
    csv += headers.join(',') + "\n"; 
    // get table data 
    if (exportmode == "full") { // total data 
      var total = oTable.fnSettings().fnRecordsTotal() 
      for(i = 0; i < total; i++) { 
        var row = oTable.fnGetData(i); 
        row = strip_tags(row); 
        rows.push(row); 
      } 
    } else { // visible rows only 
      $(tableElm+&#39; tbody tr:visible&#39;).each(function(index) { 
        var row = oTable.fnGetData(this); 
        row = strip_tags(row); 
        rows.push(row); 
      }) 
    } 
    csv += rows.join("\n"); 
    // if a csv p is already open, delete it 
    if($(&#39;.csv-data&#39;).length) $(&#39;.csv-data&#39;).remove(); 
    // open a p with a download link 
    $(&#39;body&#39;).append(&#39;<p class="csv-data"><form enctype="multipart/form-data" method="post" action="/csv.php"><textarea class="form" name="csv">&#39;+csv+&#39;</textarea><input type="submit" class="submit" value="Download as file" /></form></p>&#39;); 
} 
function strip_tags(html) { 
  var tmp = document.createElement("p"); 
  tmp.innerHTML = html; 
  return tmp.textContent||tmp.innerText; 
}

Die Funktion unterstützt den Export aller Daten und der aktuellen Seitendaten


// export only what is visible right now (filters & paginationapplied)
$(&#39;#export_visible&#39;).click(function(event) {  
   var oTable; 
   oTable= $(&#39;#spdata&#39;).dataTable(); 
   event.preventDefault(); 
   table2csv(oTable, &#39;visible&#39;, &#39;#spdata&#39;); })
   // export all table data 
$(&#39;#export_all&#39;).click(function(event) {  
  var oTable; 
  oTable= $(&#39;#spdata&#39;).dataTable(); 
  event.preventDefault(); 
 table2csv(oTable, &#39;full&#39;, &#39;#spdata&#39;); })

Wobei #spdata die ID der Tabelle ist

Backend-PHP-Export-Excel-Code


header("Content-Type: application/vnd.ms-execl");  
header("Content-Disposition: attachment; filename=myExcel.csv");  
header("Pragma: no-cache");  
header("Expires: 0");  
$buffer = $_POST[&#39;csv&#39;];     
$buffer=str_replace(",",",\t",$buffer); 
$buffer=mb_convert_encoding($buffer,"GB2312","UTF-8");  
echo $buffer;

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Codebeispiels für den JQuery-Export von Daten in Excel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn