jquery - Meteor app with DataTables: how to capture the value of selected table row -
in meteor app have following table, wrapped in data table):
<template name="introductionwizard_step_2"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">introduction wizard step 2: </h3> <h3>select application describe</h3> </div> <table class="table table-hover table-bordered" id="apptable"> <thead> <tr> <th>app id</th> <th>app name</th> <th>in scope</th> <th>app owner</th> <th>bu</th> </tr> </thead> <tbody> {{#each applist}} {{>approw}} {{/each}} </tbody> </table> <br /> </div> <br/> </div> </div> </div> </template> <template name="approw"> <tr> <td>{{appid}} </td> <td>{{appname}} </td> <td>{{inscope}} </td> <td>{{appowner}}</td> <td>{{bu}}</td> </tr> </template>
here handler datatable:
template.introductionwizard_step_2.rendered = function(){ console.log('wizard.js: introductionwizard_step_2 rendered'); /* init table */ otable = $('#apptable').datatable( ); $("#apptable tbody tr").on('click',function(event) { $("#apptable tbody tr").removeclass('row_selected'); $(this).addclass('row_selected'); }); }
my question is: how capture value of selected/clicked table row?
first, might want use meteor's own template helpers rather jquery event handler. either way, within click
event handler event.target
object should refer tr
clicked.
so need update approw
template such each tr
tag has id
or data-someidentifierofyourchoosing
attribute holds _id
or other identifier you're trying track row. within handler, $(event.target).prop('id')
or $(event.target).data('someidentifierofyourchoosing')
should retrieve it.
edit here's example (untested):
<template name="approw"> <tr data-mongoid="{{_id}}"> <td>{{appid}}</td> <td>{{appname}}</td> <td>{{inscope}}</td> <td>{{appowner}}</td> <td>{{bu}}</td> </tr> </template>
and:
template.approw.events({ "click tr": function (event) { var therowthatwasclicked = event.target; var mongoidofthatrow = $(event.target).data("mongoid"); // whatever want values; update database, etc. // copying/updating code comment completeness: var apos = otable.fngetposition(event.target); var adata = otable.fngetdata(apos[0]); var value = fngetselected( otable ).appname; console.log(adata); $("#apptable tbody tr").removeclass('row_selected'); $(event.target).addclass('row_selected'); });
see live html templates section of meteor docs.
Comments
Post a Comment