【问题标题】:Data Tables download xls/csv file not working properly数据表下载 xls/csv 文件无法正常工作
【发布时间】:2015-04-01 09:15:41
【问题描述】:

我想要 3 个按钮 - 下载 csv、xls 和 pdf 文件。在我的情况下,当我单击下载 csv 文件按钮时,它会以 csv 文件的扩展名保存,但是当我打开它时它是 excel - 它不是逗号分隔的文件。 PDF 下载按钮工作正常。 xls 按钮不起作用 - 它根本不可点击。我试着写这段代码:

"TableTools": {
     "aButtons": [ {
          "sExtends":    "download",
          "sButtonText": "Download XLS",
          "sUrl":        "/generate_xls.php"
      }]
 }

然后每个按钮下载excel文件。

这是我的代码:

<html>
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" type="text/css"  />

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="https://www.datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="https://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.Core.min.js"></script>
<link rel="stylesheet" 
href="https://www.datatables.net/release-datatables/media/css/jquery.dataTables.css" type="text/css" />
<script>
$(document).ready(function() {
    $('#example').dataTable( {
        "pagingType": "full_numbers",
         "bSort": true,
         "sDom": 'T<"clear">lfrtip',
	     "tableTools": {
	    "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
    
		aButtons: [
    { sExtends: "csv",
      sFileName: 'download.csv',
      sFieldSeperator: "," 
    },
    { sExtends: "xls",
      sFileName: 'download.xls'
    },
    { sExtends: "pdf",
      sFileName: 'download.pdf'
    }   
] 
	}


    } );
} );
</script>

<script>
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Търси '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );
</script>
<script>

</script>
</head>
<body>
<div class='col-md-8' id='student_results'>
<br/><br/>

<table  id='example'>
 <thead>
  	<tr><th>Потребител</th><th>Училище</th><th>Клас</th><th>Анкета</th><th>Въпрос</th><th>Отговор</th></tr>
  </thead>  
  <tfoot>
            <tr>
                <th>Потребител</th>
                <th>Училище</th>
                <th>Клас</th>
                <th>Анкета</th>
                <th>Въпрос</th>
                <th>Отговор</th>
            </tr>
        </tfoot> 
  <tbody>

<?php 

foreach ($student_results as $row)
{

?>
	<tr><td>
	<?php echo $row->username; ?>
	</td><td>
	<?php echo $row->school; ?>
	</td><td>
	<?php echo $row->class; ?>
	</td><td>
	<?php echo $row->survey_id; ?>
  	</td><td>
  	<?php echo $row->question_id; ?>
  	</td><td>
  	<?php echo $row->answer; ?>
  	</td></tr>
  	<?php 
 }
 ?>
	
	</table>

	<table border='1' id='example'>
	<tr><th>Въпрос</th><th>Среден резултат</th></tr>
<?php
foreach ($average_results as $row)
{
?>  	
  	<td>
  	<?php echo $row->question_id ; ?>
  	</td><td>
  	<?php echo round("$row->answer",2); ?>
  	</td></tr>
  	<?php
}
?>
</tbody>
	</table>



	</div>
	</body>
	</html>

【问题讨论】:

    标签: csv download jquery-datatables xls tabletools


    【解决方案1】:

    当您使用这种方法时,您需要定位所有需要的按钮。只需一个"xls" 就可以打破这一切。

    aButtons: [
        { sExtends: "csv",
          sFileName: 'download.csv',
          sFieldSeperator: "," //<--- example of how to set the delimiter
        },
        { sExtends: "xls",
          sFileName: 'download.xls'
        },
        { sExtends: "pdf",
          sFileName: 'download.pdf'
        }   
    ] 
    

    【讨论】:

    • 我不知道为什么如果我将这种类型的代码用于 aButtons,只有第一个按钮会下载文件,在这种情况下,当我单击 csv 文件的第一个按钮时,使用您的代码会下载一个pdf文件。我试过很多次了……
    • @iveto - 删除您拥有的所有内容并使用上面的内容。我不相信单击 CSV 按钮会生成 PDF,除非您有复制按钮行为的代码。
    • 我删除了缓存,但还是一样。
    • @iveto,嗯。您能否发布您在原始帖子中使用的 complete 标记和 JS?听起来很奇怪。然后我测试了我使用了你的.swf等,所以它与那个无关。
    • 您的代码立即为我工作。控制台有错误吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多