Building a legend

Loren Maxwell

My apologies for the poor form of double posting, but I had previously asked a related question and then marked it as answered, so I'm concerned my follow up question on that same post doesn't have as much visibility.

Here's the related question: https://datatables.net/forums/discussion/47367

At any rate, I've decided to play around with making a legend and I feel I'm right on the cusp but am not quite seeing what I need to do next.

Here's the page I'm working on: http://ghsfha.org/datatables_cards_unique.html

I've added a drawCallBack function that uses the unique() function to create an array of all the office locations. Then I use indexOf to map the office location back to the index in the array.

Where I'm getting stuck is in rendering the office location with it's index (and moving on to eventually just using the index and referencing a legend that this function will eventually create).

Here's my current code:

drawCallback: function () {
    var api = this.api();
    var rows = api.rows().nodes();
    var values = $.map(api.column('office:name').data().sort().unique(), function(value, index) { return [value]; });
    console.log(values);
    api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
        var index = values.indexOf(this.cell(rowLoop,'office:name').node().innerHTML);
        console.log(index);
        this.cell(rowLoop,'office:name').render( function(data, type, row) {
            return index+': '+data;
        } )
    } );
}

I'm using cell().render(), which I know is incorrect, but I'm not sure what to do.

Previously I had changed the innerHTML, which worked until I sorted the table because that method alters the data in the cell.

Any thoughts?

allan

Going to close this one in favour of the other thread which has the same question in it.

Allan