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?

Casillas

Possible duplicate: Struts2 jQuery DataTable 1.10 Mutidimensional Http Parameters. – Minute

@AleksandrM: no it is not the duplicate of the link which you have posted. I am able to fetch the parameter values. My question is how to fetch the selected row value and send it to server. I have updated my 'remove' function but I need to fetch the hidden column(incomeID) and send the data to server and I am not sure how to do that? – Casillas

What exactly isn't working fetching or sending? Can you shorten your post to show what exactly isn't working. – Minute

@AleksandrM: facing issue in fetching the hidden column(incomeID) value of the selected row after clicking on the remove button of the dataTable. I have edited my post hope it should be fine enough to understand the error/situation. – Casillas

incomeID is the 6th column value right? – Eidolon

Check generated html. Is your incomeID in table cell? – Minute

yes. I have changed the bVisible: true and it is printing the IncomeID in the table. @GuruprasadRao: it is 5th column of the table – Casillas

@GhostRider Amount is the 5th column right?? – Eidolon

@GuruprasadRao: I am sorry.yes you are right. I am counting from zero then index of Amount is 4 and index of incomeID is 5 – Casillas

$(this).find('td').eq(6).text() What you get when you do this? – Eidolon

alert popup with no message in it – Casillas

So what is rendered in html as 6th column? td which is hidden? – Eidolon

6th column which is hidden will have incomeID's(like 9,10,11 etc.,). for test purpose I have made 'bVisibile':true and it is giving the incomeID's as 6th column of the table on jsp page. But in real time the 6th column will be hiden. If I use the code as per your last comment it is giving empty value as if there is no 6th column in the table. – Casillas

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");

Casillas

If I can pop-up the JQuery Dialog box I can solve my 1st issue also, But not sure about the issue that is causing the dialog not to pop-up – Casillas