File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
​
​
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
        <link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.js"></script>
<link href="https://cdn.datatables.net/buttons/2.1.1/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/2.1.1/js/dataTables.buttons.js"></script>
    
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(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) {
    $('.DTE_Form_Buttons button:eq(0)').hide();
    var selected = RequestHeaderTable.row({ selected: true });
​
    RequestHeaderEditor.hide().show('ActionID');
​
    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) {
        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 () {
              switch (RequestHeaderEditor.get('ActionID')) {
                case '2': //delete
                  alert('perform custom Editor submit/update');
                  break;
                case '1': //add
                  alert('loading another dataTable');
                  //loadDetail(0, 0);
                  break;
                case '3': //update
                  alert('loading another dataTable');
                  //loadDetail(0, RequestHeaderEditor.get('UserID'));
                  break;
              };
            }
          }
        ]
      }
      
      ,{    
        extend: 'edit', editor: RequestHeaderEditor,
        text: 'View Request Details',
        action: function () {
          var selected = RequestHeaderTable.row({ selected: true });
          if (selected.data().ActionID == 2) { //delete request (no responsibility select)
            RequestHeaderEditor.edit(selected);
          } else { //add/update request
            loadDetail(selected.data().RequestID, 0);
          }
​
        }
      }
    ]
    } );  
  
  /*******************************************************************/
      function 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( [{
                  text: 'Submit Request',
                  action: function () {
                    switch (RequestHeaderEditor.get('ActionID')) {
                      case '2': //delete
                        alert('perform custom Editor submit/update');
                        break;
                      case '1': //add
                        alert('loading another dataTable');
                        //loadDetail(0, 0);
                       break;
                    case '3': //update
                      alert('loading another dataTable');
                      //loadDetail(0, RequestHeaderEditor.get('UserID'));
                      break;
                    }      
                  }
                  }])
                .show(['ActionID', 'ApprovedBy']);
/*
            $('.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 editorAction(actionID) {
    
  }
  
  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
  }
} );
​
1 error 4 warnings
Line 34: Missing semicolon.
Line 81: Bad line breaking before ','.
Line 82: Comma warnings can be turned off with 'laxcomma'.
Line 98: Unnecessary semicolon.
Line 102: Bad line breaking before ','.
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers