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 an

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