Question

我正在尝试在我的项目上实现可下载的表，我具有所需的所有CDN，并且制表符已由节点安装。我在Laravel编程。到目前为止，这是我的代码：

<div id="example-table"></div>
<script type="text/javascript">
//Build Tabulator
  var tabledata = [
  {id:1, name:"Oli Bob", progress:"12", gender:"red", rating:"", col:"", dob:"", car:""}];
  table.setData(tableData);
var table = new Tabulator("#example-table", {
    data:tabledata,
    height:"311px",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", width:80},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
        {title:"Driver", field:"car", align:"center", formatter:"tickCross"},
    ],
});

//trigger download of data.csv file
$("#download-csv").click(function(){
    table.download("csv", "data.csv");
});

//trigger download of data.json file
$("#download-json").click(function(){
    table.download("json", "data.json");
});

//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
    table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});

//trigger download of data.pdf file
$("#download-pdf").click(function(){
    table.download("pdf", "data.pdf", {
        orientation:"portrait", //set page orientation to portrait
        title:"Example Report", //add title to report
    });
});

</script>
<script type="text/javascript">
</script>
</div>

Answer 1

制表器仅管理表格内部的区域，不会在表格本身之外创建按钮。

您需要自己在页面上添加一个按钮：

<button id="download-csv">Download CSV</button>

然后添加单击绑定以触发对表的操作：

$("#download-csv").click(function(){
    table.download("csv", "data.csv");
});

尝试创建可下载的制表器表，但按钮未显示

1 个答案: