Related
I'm trying to install the default example of Tabulator (http://tabulator.info/docs/4.0/quickstart).
I installed Tabulator in my NodeJS project.
My route definition looks like this in my index.js file:
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"});
});
Then I added a div in my index.pug:
div.example-table
However, I got the following error:
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)
I guess, that Tabulator should somehow be initialized on the client side. But I don't know how...
I solved my problem.
I joined the tabulator-tables css & js path to the app configuration in 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")));
Then, I imported the tabulator css and js files in my frontend:
link(rel="stylesheet" href="tabulator.min.css")
script(type='text/javascript' src="tabulator.min.js")
Finally, I copied the sample-script in my page:
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);
Thank you very much for your help!
That looks like you are trying to use Tabulator in the response on the controller.
Tabulator is designed to be run client side, not server side. you would need to return some HTML with a script tag that then built the table on a DOM node.
You are also instantiating tabulator with a lower case "T" it should be new Tabulator
I suggest what you need to do is create an HTML page to show the table, for example the source at http://tabulator.info/basic/4.8 would do, though you would also need to serve the source JS and CSS files for the demo to work, alternativly you could change the local file paths to the CDN Links for a quick demo.
You would then need to serve this page with ExpressJS, using the sendFile function and the path to your html file
// viewed at http://localhost:8080
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
To pass table data from node to script in a pug file do the following:
// node index.js
let data = [
{id : 1, name : 'Adam', zip : '11101'},
{id : 2, name : 'Bob', zip : '95134'}
];
res.render('table.pug', { table_data: data });
// table.pug
div.example-table(id="example-table")
script.
var table = new Tabulator("#example-table", {
columns:[
{title:"Name", field:"name"},
{title:"ZIP", field:"zip"}
]
});
//load sample data into the table
table.setData(!{JSON.stringify(table_data)});
What I did to get Tabulator up and running with nodejs and express.
At first install Tabulator Tables in your nodejs/express project by npm i tabulator-tables. Then proceed as follows:
The main Javascript file in my case is "app.js".
In "app.js": Use static files to serve them:
// Use static files
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")));
In the <head> section of the html document, in my case "index.html":
<head>
<!-- Tabulator Tables -->
<link rel="stylesheet" href="tabulator.min.css">
<script src="tabulator.min.js"></script>
</head>
In the body-section of the "index.html" place a div where the table should appear:
<div id="example-table"></div>
Also in "index.html" reference a scriptfile before the closing body-tag:
<!-- Document ready -->
<script src="index.js"></script>
</body>
Last but not least in the "index.js" file:
//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"},
];
//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)
data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
],
});
//trigger an alert message when the row is clicked
table.on("rowClick", function(e, row){
alert("Row " + row.getData().id + " Clicked!!!!");
});
Then start node app.js and open your "index.html" in the browser. If the table appears and you get a message when you click on a row of it, then everything works fine.
Hope this helps.
Okay, so what am I doing wrong? I'm using the code below from the site under "Quickstart":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tabulator/dist/css/tabulator.css">
<script type="text/javascript" src="tabulator/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<script>
//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"},
];
//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)
data:tabledata, //assign data to table
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!!!!");
},
});
</script>
</body>
</html>
I'm seeing the column headings, but -- where there should be data -- there is nothing showing up!
This is my 3rd attempt with this program. I have never gotten it to work correctly. I'd use something else but the examples on the website make it appear I can do what is called for.
You need the polyfills to get it to work on IE 11.
There is more info in the docs: http://tabulator.info/docs/4.2/browsers#ie
Copy pasted your same code
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="tabulator/dist/css/tabulator.css">
<script type="text/javascript" src="tabulator/dist/js/tabulator.min.js"></script>-->
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<script>
//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"},
];
//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)
data:tabledata, //assign data to table
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!!!!");
},
});
</script>
</body>
</html>
Never used Tabulator, just down loaded version 4. I read the QuickStart and documentation, but only get a blank screen when running the example script. My pathways are correct and I can run other javascript scripts, so not sure what is wrong. I really like the idea of this interface and will help me keep up a small pharmacy organization website, I support.
Here is my html and script
<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);
</script>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Tabulator</title>
<link href="css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
I would appreciate any help.
Where are you putting your script tags that contain the Tabulator constructor? they should be in the body and under the example-table div.
Are you getting any warning messages in your browser console?
I have used solution and code from other member's answer . thanks for their help . here is working grid : http://jsfiddle.net/x6t24u8s/1/
I am very new to jqgrid and I am looking filtering to work on client side in a single search box as user types in . I'll get data one time from server and then filter in local .
Here is my jsfiddle ( I have took example from other questions)
but it doesn't seem to be working .
Can someone please point to me in right direction .
Top 2 lines define text box and table for list . below is code for jqgrid .
http://jsfiddle.net/2b1yta0j/5/
<input type="text" name="a" id="searchText" value="test2"/>
<table id="list"></table>
var mydata = [
{id:"1",invdate:"2007-10-01",name:"aest",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"best2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"cest3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"dest",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"eest2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"fest3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"gest",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"hest2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"iest3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"2007-10-01",name:"jest",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"11",invdate:"2007-10-02",name:"xest2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"12",invdate:"2007-09-01",name:"yest3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"13",invdate:"2007-10-04",name:"zest",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"14",invdate:"2007-10-05",name:"aest2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"15",invdate:"2007-09-06",name:"best3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"16",invdate:"2007-10-04",name:"cest",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"17",invdate:"2007-10-03",name:"dest2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"18",invdate:"2007-09-01",name:"eest3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', key: true, width:70, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager:'#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Single search",
loadonce : "true"
});
grid.jqGrid('navGrid','#pager',{add:false,del:false,search:true,refresh:false});
$("#searchText").on('keypress',function(){
var text = $("#searchText").val();
var postdata = grid.jqGrid('getGridParam','postData');
$.extend(postdata,{filters:'',searchField: 'name', searchOper: 'bw', searchString: text});
grid.jqGrid('setGridParam', { search: text.length>0, postData: postdata });
grid.trigger("reloadGrid",[{page:1}]);
});
i'm a beginner in bootstrap,i was trying to build an Xpage with the BootstrapValidator to validate an inputText but it dosen't work,below the code source,can we help me to find a solution!
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/bootstrapValidator/css/bootstrap.css"></xp:styleSheet>
<xp:styleSheet href="/bootstrapValidator/css/bootstrapValidator.css"></xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
<xp:script src="/bootstrapValidator/js/bootstrap.min.js" clientSide="true"> </xp:script>
<xp:script src="/bootstrapValidator/js/bootstrapValidator.js" clientSide="true"></xp:script>
</xp:this.resources>
<div class="col-md-5">
<xp:inputText id="username" title=" username"></xp:inputText>
</div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(
function() {
$("#{id:username}" ).bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
} } });
]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
Use the XPages compatible jQuery selector x$ instead of the native jQuery $ selector.
Also try using XSP.addOnLoad() instead of (document).ready().
Furthermore, your XPages xp:inputText field called "username" has an id in the browser called something like "view:_id1:_id2:_id8:username". So it's not called "username" as stated in your fields definition for bootstrapValidator. Therefore bootstrapValidator is unable to find the field. Try adding this to your scriptBlock instead of "username: {":
#{id:username}: {