chrislkeller/_tabletop_to_datatables

Use tabletop.js to pull json from Google Spreadsheet and feed it to the DataTables jQuery plugin

Demo: tabletop to datatables

This repo's location has changed, though the zip file added to this repo contains the same code from the link above...

In addition, Scott Pham has created a version of this project that uses the latest version of DataTables and removes a lot of deprecated code.

_tabletop_to_datatables's Issues

"Website" data column and sorting issues

Hi! I am trying to create a live-updating list of blogs that accept guest bloggers for my company website, and have run into a few problems - first, every entry in the "Contact" column shows up as hyperlinked text that reads "website", and the link goes nowhere.

Also, in the column of Alexa ranking data, the entries don't sort properly - it's like they're sorting by first number rather than value or something along those lines. I've copied and pasted the script below, any help would be greatly appreciated!

---

var jqueryNoConflict = jQuery;

// begin main function
jqueryNoConflict(document).ready(function(){

    initializeTabletopObject("https://docs.google.com/spreadsheets/d/1wEZ9T6Kt-0PRx2D7-TtpeyQ4ecCYOssMuer9YSyez70/pubhtml");

});

// pull data from google spreadsheet
function initializeTabletopObject(dataSpreadsheet){
    Tabletop.init({
        key: dataSpreadsheet,
        callback: writeTableWith,
        simpleSheet: true,
        debug: false
    });
}

// create table headers
function createTableColumns(){

    /* swap out the properties of mDataProp & sTitle to reflect
    the names of columns or keys you want to display.
    Remember, tabletop.js strips out spaces from column titles, which
    is what happens with the More Info column header */

    var tableColumns =   [
        {"mDataProp": "outlet", "sTitle": "Outlet", "sClass": "center"},
        {"mDataProp": "guidelines", "sTitle": "Guidelines", "sClass": "center"},
        {"mDataProp": "contact", "sTitle": "Contact", "sClass": "center"},
        {"mDataProp": "specialnotes", "sTitle": "Special Notes", "sClass": "center"},
        {"mDataProp": "alexa", "sTitle": "Alexa", "sClass": "center"},
        {"mDataProp": "pagerank", "sTitle": "Pagerank", "sClass": "center"},
        {"mDataProp": "tweets", "sTitle": "Tweets", "sClass": "center"},
        {"mDataProp": "facebooklikes", "sTitle": "Facebook Likes", "sClass": "center"}
    ];
    return tableColumns;
}

// create the table container and object
function writeTableWith(dataSource){

    jqueryNoConflict("#demo").html("<table cellpadding='0' cellspacing='0' border='0' class='display table table-bordered table-striped' id='data-table-container'></table>");

    var oTable = jqueryNoConflict("#data-table-container").dataTable({
        "sPaginationType": "bootstrap",
        "iDisplayLength": 25,
        "aaData": dataSource,
        "aoColumns": createTableColumns(),
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            console.log(aData);
            $("td:eq(2)", nRow).html("<a href='http://" + aData.website + "'>Website</a>");
            return nRow;
        },
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });

};

//define two custom functions (asc and desc) for string sorting
jQuery.fn.dataTableExt.oSort["string-case-asc"]  = function(x,y) {
    return ((x < y) ? -1 : ((x > y) ?  0 : 0));
};

jQuery.fn.dataTableExt.oSort["string-case-desc"] = function(x,y) {
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};

Is it worth offering a choice between using tabletop or a flat json file...

Problem with display on a Weebly site

Hi!

Thanks for your good work! I followed a tutorial
http://dataforradicals.com/the-absurdly-illustrated-guide-to-sortable-searchable-online-data-tables/
to try to add a searchable table to my Weebly website:
http://gtsalazar.weebly.com/science-policy-fellowships.html
But, it only the heading shows up.

I'm an absolute beginner. Any suggestions on how to resolve the issue is greatly appreciated (^_^)

Thanks for considering!

Cheers,

Gina

Translation?

Hello!

I am not able to fully translate the table in French.

Here is an example on my website:
http://naelshiab.com/special/terrains/terrains.html

As you can see, I've been able to change most of it by modifying the scripts, but I am not able to find where to change "Search" and "Showing 1 to 25 of 1,699 entries".

Any idea?

Thank you! :)

Google spreadsheets no longer use a key

Hi, hoping to use this script/table for a project, but just noticed that Google Spreadsheets doesn't use a key now--it's the full URL. Any help? Thanks

Unable to Find Columns

I followed the steps on http://dataforradicals.com/the-absurdly-illustrated-guide-to-sortable-searchable-online-data-tables/ . I made my personal columns one of which it "Company". However when I attempt to run the index it states it can not find that column. It does produce the correct amount of results. Do I need to do something special to get it to recognize the column?

Lazy Loading Support

I liked this project but It does not support lazy loading. As of now this is not possible for Large Data-sets.