Node.js 在NodeJS中与ExpressJS一起使用制表器
我正在尝试安装tablator()的默认示例。 我在我的NodeJS项目中安装了tablator 我的路由定义在我的index.js文件中如下所示:Node.js 在NodeJS中与ExpressJS一起使用制表器,node.js,express,pug,tabulator,Node.js,Express,Pug,Tabulator,我正在尝试安装tablator()的默认示例。 我在我的NodeJS项目中安装了tablator 我的路由定义在我的index.js文件中如下所示: app.get("/", (req, res) => { var table = new tabulator("#example-table", { height:205, layout:"fitColumns", //fit columns
app.get("/", (req, res) => {
var table = new tabulator("#example-table", {
height:205,
layout:"fitColumns", //fit columns to width of table (optional)
columns:[
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{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"},
];
res.render("index", { title: "Home"});
});
然后我在index.pug中添加了一个div:
div.example-table
但是,我得到了以下错误:
ReferenceError: document is not defined
at Tabulator.initializeElement (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\tabulator-tables\dist\js\tabulator.js:9223:19)
at new Tabulator (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\tabulator-tables\dist\js\tabulator.js:8612:12)
at app.get (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\index.js:37:17)
at Layer.handle [as handle_request] (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:275:10)
我想,制表器应该在客户端初始化。但我不知道如何…看起来您正试图在控制器的响应中使用制表器 制表器设计为在客户端而不是服务器端运行。您需要返回一些带有脚本标记的HTML,然后在DOM节点上构建表 您还使用小写“T”实例化制表器,它应该是
new制表器
我建议您需要做的是创建一个HTML页面来显示表,例如,源代码at可以做,但是您还需要提供源JS和CSS文件,以便演示正常工作,或者您可以将本地文件路径更改为,以便快速演示
然后,您需要使用ExpressJS提供此页面,使用sendFile函数和html文件的路径
//在http://localhost:8080
app.get('/',函数(req,res){
res.sendFile(path.join(uu dirname+'/index.html');
});
我解决了我的问题
我将表格css&js路径加入index.js中的应用程序配置:
app.use(express.static(path.join(__dirname, "node_modules/tabulator-tables/dist/css")));
app.use(express.static(path.join(__dirname, "node_modules/tabulator-tables/dist/js")));
然后,我在前端导入了制表器css和js文件:
link(rel="stylesheet" href="tabulator.min.css")
script(type='text/javascript' src="tabulator.min.js")
最后,我在我的页面中复制了示例脚本:
div.example-table(id="example-table")
script.
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
//define some sample data
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{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"},
];
//load sample data into the table
table.setData(tabledata);
非常感谢你的帮助 您是否尝试将制表器javascript包含在页面上的
script
标记中,而不是包含在节点中?如何将其包含在页面上?如果我尝试这样做:var tablator=require('tablator-tables');我收到错误消息“require不是函数”…感谢您的回复。如果tablator不能直接在NodeJS中使用,那么为什么可以安装和导入它?@FrédéricUhrweiller NPM也用于客户端javascript库。通常的做法是在服务器端导入它们,以便在发送到客户端之前可以将它们与任何其他客户端库和自定义javascript捆绑到单个文件中。除了前面的答案(这是主要原因)之外,Tabletor还可以用于具有用户界面的节点应用程序,如electron framework