$(document).ready( function () {

  var myData = 

    [

    {

        "DT_RowId": "row_50022",

        "RequestID": 50022,

        "ApprovedBy": 1,

        "ActionID": 1

    },

    {

        "DT_RowId": "row_50023",

        "RequestID": 50023,

        "ApprovedBy": 1,

        "ActionID": 2

    },

    {

        "DT_RowId": "row_50024",

        "RequestID": 50024,

        "ApprovedBy": 1,

        "ActionID": 3

    }

    ];

​

  var RequestHeaderEditor = new $.fn.dataTable.Editor ({

    data: myData,

    table: '#example',

    fields: [

      {label: "RequestID", name: "RequestID"},

      {label: "ActionID", name: "ActionID"},

      {label: "ApprovedBy", name: "ApprovedBy"}

    ]

  })

​

  RequestHeaderEditor.buttons(

        {

            text: 'next'

        }

    );

  RequestHeaderEditor.on('preOpen', function (e, node, data, items, type) {

    console.log('preOpen', data)

    $('.DTE_Form_Buttons button:eq(0)').hide();

    var selected = RequestHeaderTable.row({ selected: true });

/*

    RequestHeaderEditor

    .hide()

    .show('RequestHeader.ActionID');

    RequestHeaderEditor.set('RequestHeader.DepartmentID', $('#departmentID').val());

    RequestHeaderEditor.disable('RequestHeader.DepartmentID');

*/

  if (data == 'edit') {

      console.log('approvedby', selected.data().ApprovedBy, 'requestID', selected.data().RequestID);

      loadResponsibilityEditor((selected.data().ApprovedBy != null), selected.data().RequestID);

    }

    });

​

  RequestHeaderEditor.field('ActionID').input().on('change', function (e, d) {

    console.log('ActionID).input().on(change', d)

        if (d === undefined) {

            // The change was triggered by the end user on update rather than an auto set

            loadResponsibilityEditor();

        }

    });

  var RequestHeaderTable =     $('#example').DataTable( {

    dom: 'Bfrtip',  

    data: myData,

    columns: [

      {title: 'RequestID', data: 'RequestID'},

      {title: 'ApprovedBy', data: 'ApprovedBy'},

      {title: 'ActionID', data: 'ActionID',

                      render: function (data, type, row) {

                    var options = ['', 'Add', 'Delete', 'Change'];

                    return options[data];

                      }

      }

    ],

    select: { style: 'single' },

    buttons: [

      {

        extend: 'create', editor: RequestHeaderEditor,

        text: 'Create new Request'

        , formButtons: [

          {

            text: '',

            action: function () {

          console.log('action: Create new Request')

              isNewRequest = 1;

              console.log('ActionID:', RequestHeaderEditor.get('ActionID'))

              switch (RequestHeaderEditor.get('ActionID')) {

                case '2': //delete

                  var result = addHeader();

                  if (result.substring(0, 1) !== "*") {

                    RequestHeaderEditor.close();

                    RequestHeaderTable.ajax.reload();

                  }

                  //}

                  break;

                case '1': //add

                  //loadDetail(0, 0);

                  break;

                case '3': //update

                  //loadDetail(0, RequestHeaderEditor.get('UserID'));

                  break;

              };

            }

          }

        ]

      }

      ,{    

        extend: 'edit', editor: RequestHeaderEditor,

        text: 'View Request Details',

        action: function () {

          console.log('action: View Request Details')

          isNewRequest = 0;

          $('#copyUserID').val('0');

          var selected = RequestHeaderTable.row({ selected: true });

          if (selected.data().ActionID == 2) { //delete request (no responsibility select)

​

            //RequestHeaderEditor.edit(selected);

            RequestHeaderEditor.edit(selected, {

              submit: 'changed'

            });

          } else { //add/update request

            loadDetail(selected.data().RequestID, 0);

          }

​

        }

      }

    ]

    } );  

      function loadResponsibilityEditor() {

        console.log('loadResponsibilityEditor()')

        RequestHeaderEditor.hide(undefined, false);

        RequestHeaderEditor.show(['ActionID'], false);

        var actionID = RequestHeaderEditor.get('ActionID');

        console.log(actionID);

        switch (actionID) {

            case '1':  //add

                RequestHeaderEditor.show(undefined, false);

                $('.DTE_Form_Buttons button:eq(0)')

                    .text('Next')

                    .show();

                break;

            case '2': //delete

                RequestHeaderEditor

                .buttons( 'Submit Request' )

                .show(['ActionID', 'ApprovedBy']);

                console.log('changing button', $('.DTE_Form_Buttons button:eq(0)'));

                //$('.DTE_Form_Buttons button:eq(0)')

                //    .text('Submit Request')

                //    .show();

                break;

            case '3': //update

                RequestHeaderEditor.show(['ActionID', 'ApprovedBy'], false);

                $('.DTE_Form_Buttons button:eq(0)')

                    .text('Next')

                    .show();

                break;

        }

​

    }

  function addHeader() {

    //ajax call to add a new record and returns new RequestID for other purposes

    return 1234;

  }

  function loadDetail(headerID, userID) { 

    //opens another dataTable with details for the request

  }

} );

​