scottpham / tabletop-to-datatables

Creates a bootstrapified interactive table from a google spreadhseet. An update to Chris Keller's very useful tabletop to datatables template.
http://scottpham.github.io/tabletop-to-datatables/
43 stars 21 forks source link

Table not showing up #6

Closed ickyickyricky closed 6 years ago

ickyickyricky commented 6 years ago

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?

scottpham commented 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:

ickyickyricky commented 6 years ago

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?

scottpham commented 6 years ago

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>
ickyickyricky commented 6 years ago

That worked.

Thank you!