Datatables functionality in aldeed:tabular (add row)

help
1

Can anyone help me get started with Tabular? I’ve got the code below and trying to add a row but I know I’m missing something. Jquery somehow doesn’t pick up the table. I’m brand new here (to coding). Meteor and these packages are making things much easier than I expected, but I can’t see how to combine the tabular readme with the Datatables instructions. Thanks all.

client/transactions.html

   <div>
    <button id="addRow">Add new row</button>
</div>
<div>
    {{> tabular table=TabularTables.Transactions id="transactions" class="table table-striped table-bordered table-condensed"}}
</div>

client/transactions.js

Template.Transactions.rendered = function () {
var t = Tabular.Transactions;
$('#addRow').on( 'click', function () {
    t.row.add( [
        '1',
        '2',
        '3'
    ] ).draw();
});
};

lib

TabularTables.Transactions = new Tabular.Table({
name: "Transactions",
collection: Transactions,
columns: [
{data: "target", title: "Target"},
{data: "acquirer", title: "Acquirer"},
{data: "enterpriseValue", title: "Enterprise Value"},
{
    tmpl: Meteor.isClient && Template.precedentSelectCell
}
]
});

My use case is fairly simple - creating a table and populating it with arrays of financial data selected from collections of either companies or transactions. Then using averages of information in one column to create SVG shapes (mimicking a chart, but with added interactivity). As per the conversation on Autoform here, am I using something too complex? I actually tried just using Datatables itself but had trouble reconciling their instructions with Meteor.

2

I continued to work on the helper code and realized some errors, but still can’t make it run.

Template.Transactions.rendered = function () {
var t = $('TabularTables.Transactions').DataTable();
$("#addRow").click(function() {
    t.row.add( [
        "target",
        "acquirer",
        "1000"
    ] ).draw();
});
};
3

I realized my issue was that my Tabular datatable was tied to a collection (the example on Datatables.net hardcodes the data in the table construction) that is not populated. So there was nothing to add. If I link to a populated collection, I at least see the data. Now I need to write the selectors to choose what gets added and what does not

4

Hey, what do you mean by linking to a populated collection?

5

It was just an illustration of how new I was (and still am) to writing code. My original issue was that the data was not displaying on the client. What I didn’t take into account was that I hadn’t yet added any data to the Transactions collection, so there was nothing to display. Once I did, it all appeared fine.

6

Ok, would this work if I’m trying to add lets say a tree table view to the rows?
SOmething that looks like this →

1692×370 9.63 KB

7

@ecuanaso, I ended up not using datatables (too extensive for what I needed), so I’m not sure.