Placing a Searchable Table on a Squarespace Website

I am not a programmer, but I know enough to barely get by. In the past few months I had been frustrated with difficulties of locating the right journal articles related to ocularistry. Although an index in pdf format containing all the articles published by the ASO up to 2011 is available, I wanted something searchable. Then, I wanted to place it on my website so that other ocularists can use it to locate articles too.

I found a great tutorial here using this demo data table. You should start by completing all the instructions given in this tutorial either using their demo data or your own data. Make sure to follow ALL the steps regarding Google Spreadsheet. The new Google Spreadsheet looks a little different, but the general steps are the same. The part where the tutorial says to copy just the key, I found the original code to include the entire link. So that's what I did. In the new Google Spreadsheet, the "key" is the part after d/ in the url.

I also made the following modifications:

  • After changing the title <h1>Your Title</h1> in index.html, remove the following code:
<p>Use <a href="http://builtbybalance.com/Tabletop/">Tabletop.js</a> to pull json from Google Spreadsheet and feed it to the <a href="http://datatables.net/">DataTables</a> jQuery plugin.</p>

<p>Demo by <a href="https://twitter.com/CourierEssig">Chris Essig</a> &amp; <a href="https://twitter.com/ChrisLKeller">Chris Keller</a> and made possible thanks to the Open Source work of <a href="http://twitter.com/dangerscarf">Jonathan Soma</a> &amp; <a href="https://github.com/DataTables">Allan Jardine</a>.</p>

<ul>

<li><p><a href="http://projects.chrislkeller.com/demos/tabletop_to_datatables">Demo Page</a></p></li>

<li><p><a href="https://github.com/chrislkeller/projects.chrislkeller.com/tree/master/demos/tabletop_to_datatables">Fork the Repo</a></p></li>

<li><p><a href="https://github.com/chrislkeller/projects.chrislkeller.com/blob/master/demos/tabletop_to_datatables/README.md">View the ReadMe</a></p></li>

</ul>
  • In table-feed.js, go ahead and add or subtract columns and change the titles by modifying this, as explained in the tutorial link above:
var tableColumns =   [
    {"mDataProp": "brewery", "sTitle": "Brewery", "sClass": "center"},
    {"mDataProp": "city", "sTitle": "City", "sClass": "center"},
    {"mDataProp": "website", "sTitle": "Website", "sClass": "center"}
];
  • in table-feed.js, delete this:
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
  console.log(aData);
    $("td:eq(2)", nRow).html("<a href='http://" + aData.website + "'>Website</a>");
    return nRow;
},
  • You can change the highlighted column color in the demo_table.css file. Around line 380 you will see this code. Either hide it or change the hex code (#c0e9f0) to the code of your desired color.
tr.even td.sorting_1 {
    background-color: #c0e9f0;
}

Now that you have customized the demo data table, how would you place it on the Squarespace website?

First, you'll need to upload all the javascript files onto squarespace following these instructions. I did the same thing with my css files too. To take it one step further, I opened up all the url sources and saved the codes in new files, then uploaded them onto squarespace as well. This part is optional. I did it out of the concern that the codes on the original developers' websites can change, be moved to a different location, or be deleted completely.

Still following the instructions in the link above, with index.html opened in a text editor, change the parts inside the quotation marks in <script src=""></script> to your file's location. For example, if you used the data from the demo table example, you may have uploaded a file called tabletop.js. Your code would now look like this <script src="s/tabletop.js"></script>

(optional: I changed the folder "scripts" in the downloaded files to "s" and moved all my css files there. This is not necessary, but it does allow me to preview index.html in my browser without having to change the location of the links)

Now place a code block in your Squarespace site where you want your searchable data table. Copy the entire code from index.html and paste it in your code block.

If it works, do a happy dance. Here is my example: http://www.prostheticslab.com/index


Please do not ask me any programming questions. I probably won't know the answer.