datatables Editor filed type 'select'+ action for Edit and remove buttons issues

Question

Hi I have a web application built using java+struts2+hibernate. I am using dataTable Editor in displaying the contents of one of the backend table. I am new to DataTables and I am finding it difficult to do couple of things.

1) the dropdown that appears in New/Edit window will contain a dropdown and the options of the dropdown comes from the DB. I am not sure how to return a JSON object which contains the list and iterate it to populate the dropdown box in the mentioned window??

2) How to fetch the hidden column value of the selected row after clicking on the remove button of the DataTable?

Below is my code:

 <table id="example" class="display" cellspacing="0" width="100%">
     <thead>
        <tr>
            <th>Description</th>
            <th>Category</th>
            <th>Payee</th>
            <th>Date</th>
            <th>Amount</th>
            <th>Income ID</th>
        </tr>
    </thead>
   </table>

JQuery:

  <script src="jquery/dt_editor/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
   <script src="jquery/dt_editor/DataTables-1.10.10/js/jquery.dataTables.min.js" ></script>
   <script src="jquery/dt_editor/Buttons-1.1.0/js/dataTables.buttons.min.js"></script>
  <script src="jquery/dt_editor/Select-1.1.0/js/dataTables.select.min.js" >    </script>
   <script src="jquery/dt_editor/Editor-1.5.4/js/dataTables.editor.min.js" ></script>
   <script>
     var editor; 

    $(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
    "ajax": "refreshIncomeData",
    "table": "#example",
    "fields": [ {
            "label": "Description:",
            "name": "inocme.description"
        }, {
            "label": "Amount:",
            "name": "inocme.amount"
        },
        {
            "label": "Category:",
            "name": "userCodeID",
            "type": "select",
            "options": [{userCodeName: "Edinburgh", userCodeID: 51}],
            optionsPair: {
                label: 'userCodeName',
                value: 'userCodeID'
            }
        },
        {
            "label": "Transaction Date:",
            "name": "inocme.transactionDate",
            "type": "datetime",
            "def": new Date()
        }
    ]
    } );

    $('#example').DataTable( {
    dom: "Bfrtip",
    "ajax": "refreshIncomeData",
    serverSide: true,
    "aoColumns": [
                  {"mData":"description","bSearchable": true,"bSortable": true},
                  {"mData":"catergory.userCodeName","bSearchable": false,"bSortable": false},
                  {"mData":"payee.payeeName","bSearchable": false,"bSortable": false},
                  {"mData":"transactionDate","bSearchable": false,"bSortable": false},
                  {"mData":"amount","sWidth":"30px","bSearchable": false,"bSortable": true},
                  {"mData":"incomeID","visible":false}],
    select: true,
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { "text": "Remove Record", action: function(){

            $.each($("#example tr.selected"),function(){ //get each tr which has selected class
                alert($(this).find('td').eq(4).text()) //Gives me 4th column value of the table(amount)

            });
        } }
    ]
    } );
  } );

 </script>

I am able to get the 4th column value( which is amount) from the table when clicked on the remove button. But I am unable to get the 5th column value which is incomeID(primary key) value which is hidden(bVisible:false). now How to get that hidden column value? This can solve my issue.

Update:

 var myTable=$("#example").DataTable();
 var col=myTable.row().cell(5).data();
alert(col);

this is giving me an object type. I am not sure how to get the text from object or convert that object to normal text?

Answer 1

Here is the solution for one of my issues( issue 2 of this post).

capturing the selected row index using the event and storing index in variable as clicking of remove button happens after we select a row. now calling a function for the remove button and using $.getJSON('URL',parameters,function) I am doing the delete operation and it's working perfectly fine.

Updated CODE:

<script src="jquery/dt_editor/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script src="jquery/dt_editor/DataTables-1.10.10/js/jquery.dataTables.min.js" ></script>
<script src="jquery/dt_editor/Buttons-1.1.0/js/dataTables.buttons.min.js">    </script>
<script src="jquery/dt_editor/Select-1.1.0/js/dataTables.select.min.js" ></script>
<script src="jquery/dt_editor/Editor-1.5.4/js/dataTables.editor.min.js" ></script>
<script>
var removerRowID;
$(document).ready(function() {
var oTable=new $('#example').DataTable( {
    dom: "Bfrtip",
    "ajax": "refreshIncomeData",
    serverSide: true,
    "aoColumns": [
                  {"mData":"description","bSearchable": true,"bSortable": true},
                  {"mData":"catergory.userCodeName","bSearchable": false,"bSortable": false},
                  {"mData":"payee.payeeName","bSearchable": false,"bSortable": false},
                  {"mData":"transactionDate","bSearchable": false,"bSortable": false},
                  {"mData":"amount","sWidth":"30px","bSearchable": false,"bSortable": true},
                  {"mData":"incomeID","visible":false}],
    select: true,
    buttons: [
        { "text": "New", action: function(){} },
        { "text": "Edit",   action: function(){} },
        { "text": "Remove", action: function(){

            var tempIncomeID=$("#example").dataTable().fnGetData(removerRowID).incomeID;
    $.getJSON("deleteUserIncomesJson",{incomeID:tempIncomeID},
    function(data)
    {
        $("#example").dataTable().fnDeleteRow(removerRowID);
        });
        } }
    ]
} );

  $("#example").on('click','tr',function(){
   removerRowID=oTable.row(this).index();
   });
 } );

But: When I am trying pop-up a JQuery Confirmation Dialog box after I click on remove button( so that I can delete the record upon confirmation) it is not working. As In the Dialog box is not getting appeared. Here are the list of files that I have added from JQuery UI library. Please comment if any one know how to fix it.

  <link rel="stylesheet" href="jquery/jquery-ui.css">
 <link rel="stylesheet" href="css/datatable/demo_page.css">
 <link rel="stylesheet" href="css/datatable/demo_table_jui.css">
 <script src="jquery/external/jquery/jquery.js"></script>
 <script src="jquery/jquery-ui.js"></script>

 $( "#dialog-confirm" ).dialog( "open");