Detailed explanation of jquery export data to excel code example-JS Tutorial-php.cn

Detailed explanation of jquery export data to excel code example

伊谢尔伦

Release： 2017-07-22 09:25:59

Original

2502 people have browsed it

DataTables is a jQuery table plug-in. This is a highly flexible tool based on progressive enhancements that will add advanced interactive controls and support for any HTML form. Main features:

However, it is a pity that the official website table data export method uses the tabletools plug-in, which uses flash to export data, and does not support Chinese data. By searching the official API and information, I found the use of jquery and php export data method.

Javascript function to export data

function table2csv(oTable, exportmode, tableElm) { 
    var csv = &#39;&#39;; 
    var headers = []; 
    var rows = []; 
    // Get header names 
    $(tableElm+&#39; thead&#39;).find(&#39;th&#39;).each(function() { 
      var $th = $(this); 
      var text = $th.text(); 
      var header = &#39;"&#39; + text + &#39;"&#39;; 
      // 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(&#39;,&#39;) + "\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; 
}

Copy after login

The function supports exporting all data and the current page data

// 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;); })

Copy after login

where #spdata is the id of the table

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;

Copy after login

The above is the detailed content of Detailed explanation of jquery export data to excel code example. For more information, please follow other related articles on the PHP Chinese website!