Click on row to edit/delete?

I am using CI to generate a table

$query = $this->expenses_model->expenses_table();

//gary's code went here

$this->load->library('table');
$tmpl = array ('table_open'  => '<table class="table">');
$this->table->set_template($tmpl);

// gary added 'Edit' at end of array

$this->table->set_heading('Date', 'Plant', 'Expense', 'Category', 'Notes');

//when using gary's code, changed $query below to $data

$table['tab'] = $this->table->generate($query);     
$this->load->view('vw/exp/expenses_vw', $table, TRUE);

which runs through jQuery DataTables on client side using

$(document).ready(function() {
    /* Init DataTables */
    var oTable = $('.table').dataTable( {
                "bJQueryUI": true,
                "sScrollX": "",
                "bSortClasses": false,
                "aaSorting": [[0,'desc']],
                "bAutoWidth": true,
                "bInfo": true,
                "sScrollY": "100%", 
                "sScrollX": "100%",
                "bScrollCollapse": true,
                "sPaginationType": "full_numbers",
                "bRetrieve": true
                } );    
    } );

Question #1 Each record on the database has a unique autoincrement ID record_id that would need to be passed to each row. But this record_id column cannot show in the front end (ie needs to be hidden). How do we do this via CI?

Question #2 What kind of JS should I use to allow the user to click on the row and get a popup with a form for edit/delete?.

Thanks for helping!

PS - here is the model to generate table data

function expenses_table()
{
    $id = $this->tank_auth->get_user_id();

    $this->db->select('re开发者_如何学JAVAcord_id, date_format(date, \'%c/%d/%Y\'), plant_name, concat(\'$ \', format(value_1, 2)), value_2, value_3', FALSE);
    $this->db->from('data');
    $this->db->join('plants', 'plants.plant_id = data.plant_id_fk');
    $this->db->where('category_1', 'expenses');
    $this->db->where('data.id_fk', $id);
    $this->db->order_by("date", "desc");
    $query = $this->db->get();

    return $query;
}   

---

1. Add a new column Edit

$this->table->set_heading('Date', 'Plant', 'Expense', 'Category', 'Notes', 'Edit');

2. Build the edit link based on the record_id for each record and hide record_id

 $data = array();

 while ($row = $query->result_array())
 {
   $anchor = '<a href="#" class="edit_record" record_id="' . $row['record_id'] . '">Edit</a>';

   // Hide the record_id in the table output
   unset($row['record_id']);

   // Let's add the link so we can edit this entry
   $row[] = $anchor;

   // Lets push the new row so it can be output
   $data[] = $row;

 }

 $table['tab'] = $this->table->generate($data);

3. Use jQuery to interact with the rows:

 $('a.edit_record').click(function() {
 var record_id = this.attr('record_id');

 // Lets generate the magical lightbox here...   

 });

There are many lightbox plugins available for jQuery, that can accept HTML. All you'll need to do is create an ajax controller to that handles the request, uses the model to edit/delete and return the result in JSON.

jquery lightbox html (Google)