Question

我已经从Tabulator页面复制了'basic'演示，并进行了必要的更改，以便它可以本地查看javascript和CSS文件，但仅显示空白页面。以下是我网站上页面的来源。为什么页面空白？

 <!DOCTYPE html>
<html lang="en">
        <head>
                <link href="t/dist/css/tabulator.min.css" rel="stylesheet">
        </head>
        <body>
                <div id="example-table"></div>

                <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
                <script type="text/javascript" src="t/dist/js/tabulator.min.js"></script>
                <script type="text/javascript">
                        //sample data
                        var tabledata = [
                            {id:1, name:"Oli Bob", age:"12", col:"red", dob:"12/08/2017"},
                            {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
                            {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
                            {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
                            {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
                        ];

                        $("#example-table").tabulator({
                            height:200, // set height of table to enable virtual DOM
                            data:tabledata, //load initial data into table
                            layout:"fitColumns", //fit columns to width of table (optional)
                            columns:[ //Define Table Columns
                                {title:"Name", field:"name", sorter:"string", width:150},
                                {title:"Age", field:"age", sorter:"number", align:"left", formatter:"progress"},
                                {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
                                {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
                            ],
                            rowClick:function(e, id, data, row){ //trigger an alert message when the row is clicked
                                alert("Row " + id + " Clicked!!!!");
                            },
                        });
                </script>
        </body>
</html>

编辑/更新

我下载了4.2.1版本，并从主页上直接提取了该示例。还是行不通。我已经对此进行了几个月（打开和关闭）的修改，并且希望在表中查看数据。我在网站上看到了所有可用的示例，但是当我将它们复制到我的服务器时，它们不会显示任何数据。

我在做什么错了？

<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

<script type="text/javascript">

var table = new Tabulator("#example-table", {
        data:tabledata,           //load row data from array
        layout:"fitColumns",      //fit columns to width of table
        responsiveLayout:"hide",  //hide columns that dont fit on the table
        tooltips:true,            //show tool tips on cells
        addRowPos:"top",          //when adding a new row, add it to the top of the table
        history:true,             //allow undo and redo actions on the table
        pagination:"local",       //paginate the data
        paginationSize:7,         //allow 7 rows per page of data
        movableColumns:true,      //allow column order to be changed
        resizableRows:true,       //allow row order to be changed
        initialSort:[             //set the initial sort order of the data
                {column:"name", dir:"asc"},
        ],
        columns:[                 //define the table columns
                {title:"Name", field:"name", editor:"input"},
                {title:"Task Progress", field:"progress", align:"left", formatter:"progress", editor:true},
                {title:"Gender", field:"gender", width:95, editor:"select", editorParams:{"Male":"male", "Female":"female"}},
                {title:"Rating", field:"rating", formatter:"star", align:"center", width:100, editor:true},
                {title:"Color", field:"col", width:130, editor:"input"},
                {title:"Date Of Birth", field:"dob", width:130, sorter:"date", align:"center"},
                {title:"Driver", field:"car", width:90,  align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
        ],
});

</script>

如果我缺少任何内容或需要更改某些内容，请具体说明（不要只说“在网站上查看此示例”）

Answer 1

您正在使用的演示适用于v3.5，与您正在使用的v4.1代码库不兼容

如果您转到Quickstart Guide，它将带您了解如何设置4.1版的功能

网站上挤满了许多工作示例，供您玩

制表符：演示显示空白页

1 个答案: