I am trying to get my data to display into a table with the ability to show selected columns. I think the twitter-bootstrap can do what I need, but it doesn't have much documentation or full on code examples I can follow very easily with being newer to rails / JSON.
http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html
I can access my JSON data with /weights.json and it displays like the following:
{
"id": 163,
"weight": "111.0",
"note": "test new",
"user_id": 1,
"created_at": "2015-01-07T01:43:29.000Z",
"updated_at": "2015-01-07T01:43:29.000Z"
}
One thing to note is, my JSON does not look pretty.. It comes out in one line and hard to read. Is it supposed to do this when you use a format.json in the controller? Or is it supposed to be multi lined like the above?
My table:
<table data-toggle="table" data-url="weights.json" data-cache="false" data-height="299">
<thead>
<tr>
<th><%= sortable "weight" %></th>
<th><%= sortable "note" %></th>
<th><%= sortable "created_at", "Date" %></th>
<th class="nopadding"></th>
<th class="nopadding"></th>
</tr>
</thead>
</table>
The documentation at this point just makes it sound like it will work? No other info is needed? Am I not calling the data-url properly? Do I need to use the full URL?
How would I implement this with JS calls and to implement the showColumns and showToggle options?
Thanks!
UPDATE
Alright.. I have this working! However, when I load the index page / action.. It doesn't load the table the first time. Any thoughts? I have to refresh the page in order for the table to load the table with the JSON data. Below I will post all my code.
I am now stuck on how do I edit or delete the entry? I at first put the <% link_to %> in the .JS file.. But after thinking about it.. that won't work within the JS.
So how do I send an edit or delete through my button?
(FYI, I have regenerated my scaffold, so there are new fields compared to the top post)
application.js:
function operateFormatter(value, row, index) {
return
[ '<a class="edit ml10 btn btn-default" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-pencil"></i>',
'</a>'
].join('');
}
function operateFormatter2(value, row, index) {
return [
'<a class="remove ml10 btn btn-default" href="javascript:void(0)" title="Delete">',
'<i class="glyphicon glyphicon-trash"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
index.html.erb:
<div id="custom-toolbar">
<%= link_to new_weight_tracker_path, :class => "btn btn-default", :remote => true, "data-toggle" => "modal", "data-target" => "#addMeasurement", 'aria-label' => "Add New Measurement" do %><span class="glyphicon glyphicon-plus"></span><% end %>
</div>
<table id="table-pagination" data-toggle="table" data-url="/weight_trackers.json" data-click-to-select="true" data-toolbar="#custom-toolbar" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-height="600" data-pagination="true" data-sort-name="created_at" data-show-export="true" data-sort-order="desc" data-export-types="['json', 'xml', 'csv', 'txt', 'excel']" >
<thead>
<tr>
<th data-field="weight" data-sortable="true" data-align="right">Weight:</th>
<th data-field="waist" data-sortable="true" data-visible="false" data-align="right">Waist:</th>
<th data-field="wrist" data-sortable="true" data-visible="false" data-align="right">Wrist:</th>
<th data-field="hip" data-sortable="true" data-visible="false" data-align="right">Hip:</th>
<th data-field="forearm" data-sortable="true" data-visible="false" data-align="right">Forearm:</th>
<th data-field="note" data-sortable="true" data-visible="false" data-align="left">Note:</th>
<th data-field="created_at" data-sortable="true" data-align="right">Date:</th>
<th class="nopadding" data-field="operate" data-formatter="operateFormatter" data-events="operateEvents" data-align="center" data-valign="center" data-halign="center"></th>
<th class="nopadding" data-field="operate" data-formatter="operateFormatter2" data-events="operateEvents" data-align="center" data-valign="center" data-halign="center"></th>
</tr>
</thead>
</table>
weight_trackers_controller.rb:
def index
@weight_trackers = WeightTracker.where(user_id: current_user.id)
@weight_tracker = WeightTracker.new
respond_to do |format|
format.html
format.json { render json: @weight_trackers }
format.xml { render :xml => @weight_trackers.to_xml }
end
end
def new
@weight_tracker = WeightTracker.new
respond_with(@weight_tracker)
end
So again, my question is.. how do I make the buttons for edit / delete columns, call the edit method / page or the delete option.
Update 2
I have edit and delete working! See the below application.js code:
function operateFormatter(value, row, index) {
return [
'<a class="edit ml10 btn btn-default" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-pencil"></i>',
'</a>'
].join('');
}
function operateFormatter2(value, row, index) {
return [
'<a class="remove ml10 btn btn-default" data-method="delete" href="/weight_trackers/' + row.id + '" title="Delete">',
'<i class="glyphicon glyphicon-trash"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .edit': function (e, value, row, index) {
document.location.href='/weight_trackers/' + row.id + '/edit'
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('Are you sure you want to delete entry for ' + row.created_at);
document.location.href='/weight_trackers'
console.log(value, row, index);
}
};
This does it.. However now I need to work on having the edit open a modal.
I am still having one pretty big issue though. The table will not load on initial page open. Any ideas on how I can get it to load the JSon data without having to reload / F5 the page?
