Closed ickyickyricky closed 6 years ago
The key variable and the column objects looks right, but other things could be going wrong. Have you published the whole project online or on github? If you could share that, it would be more informative.
Other things to check:
I uploaded everything to my live server. It can be seen here: affiliatecontent.net
All I see is a 304 error.
I do not have HTTPS set up on my server, is that an issue?
In the link you sent I see no error in the developer console. I believe that's because you aren't including any of the libraries required by this project, including graphic.js
, which is the code that does the actual generating of your table. Lack of HTTPS is not an issue for this project.
First, you must make sure you've uploaded your graphic.js
to your server. Its location should be in js/graphic.js
relative to your index.html
.
Second you need to include the index.html
code exactly as shown here. You will want to change the content in the <body>
tag but you need the libraries specified in the <head>
and right before the <body>
. Specifically, you are lacking these css libraries in the head:
<!--BOOTSTRAP CSS-->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- DATATABLES BOOTSTRAP INTEGRATION CSS -->
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">
and these js libraries right before the end of the </body>
:
<!--JS LIBRARIES-->
<!--JQUERY-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<!--BOOTSTRAP JS-->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- DATATABLES -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<!--BOOTSTRAP INTEGRATION JS -->
<script src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<!-- TableTop -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.4.3/tabletop.min.js"></script>
<script src="js/graphic.js" type="text/javascript"></script>
That worked.
Thank you!
I shared my table AND published it. I copied the key from the share button. It is set up so that anyone can find and view it.
Here is the code I edited:
` //enter google sheets key here var key = "1bs-gARbVBwuopFStBzTypVOBCPpe-6qhAFj1uNdSevk";
//"data" refers to the column name with no spaces and no capitals //punctuation or numbers in your column name //"title" is the column name you want to appear in the published table var columns = [ { " data": "shootid", "title": "ShootID" }, { "data": "title", "title": "Title" }, { "data": "description", "title": "Description" }, { "data": "duration", "title": "Duration" } }, { "data": "names", "title": "Names" } }, { "data": "tags", "title": "Tags" } }, { "data": "Cover", "title": "cover" } }, { "data": "downloadurl", "title": "Video" } }, { "data": "program", "title": "Program" } }, { "data": "network", "title": "Network" } }, { "data": "website", "title": "Website" } }, { "data": "category", "title": "Category" } }, { "data": "dateadded", "title": "Date Added" }]; `
I tried putting every share link possible in the "var key" but nothing works. All of the columns on my spreadsheet are named exactly the same as what appears in "date":, all lower-key.
I'm not sure where I'm going wrong?