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://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>
<link href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.js"></script>
​
    <link href="https://cdn.datatables.net/keytable/2.5.0/css/keyTable.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/keytable/2.5.0/js/dataTables.keyTable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <div id="list" class="container">
      <div class="row">
        <div class="col-lg-12">
  
     <table id="example" class="display nowrap" width="100%">
       <colgroup>
              <col style="width: 10%"> 
              <col style="width: 20%"> 
              <col style="width: 10%"> 
              <col style="width: 25%"> 
            </colgroup> 
        <thead>
          <tr>
             <th id="Date1">Date1</th>
                <th id="Date2">Date2</th>
                <th id="To">To1</th>
                <th id="No">No1</th>
          </tr>
        </thead>
       </div>
      </div>
     </div>   
​
        <tbody>
          <tr>
            <td>2005/11/28</td>
            <td>2003/10/02</td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
​
            
            
          </tr>
          <tr>
            <td>2012/11/28</td>
            <td>2009/10/02</td>
            <td>Garrett Winters</td>
            <td>Director</td>
           
            
          </tr>
          <tr>
            <td>2001/11/28</td>
            <td>2010/10/02</td>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
          </tr>
          <tr>
            <td>2015/11/28</td>
            <td>2005/10/02</td>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
     
          </tr>
          <tr>
            <td>2008/11/28</td>
            <td>2018/10/02</td>
            <td>Jenna Elliott</td>
            <td>Financial Controller</td>
          </tr>
         
         
        </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
​
#list {
  min-height: 25em;
   margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
td.inlineEditable {
  font-weight: 600;
}
​
td.noEdit {
  cursor: default;
  font-weight: normal;
  color: gray;
  
}
JavaScriptSaved
 
var _editBtn,_cancelBtn;
$(document).ready( function () {
 //var example='example';
​
   //var TableBody = $("#" +  example+ " tbody");
 
  var exampleEditor = new $.fn.dataTable.Editor(getConfig());
​
   
   $('#example').on('preSubmit', function(e, o, action) {
             exampleEditor( this); no1 = exampleEditor.field('no1');
        });
  $('#example').on('postEdit', function(e, json, data) {
            exampleEditor(this); 
    no1 = exampleEditor.field('no1');
        });
  $('#example').on('preOpen', function(e, mode, action) {
 exampleEditor(this);
    no1 = exampleEditor.field('no1');
        }); 
  
   var dt = $('#example').DataTable({
     "rowId" : "no1",
    
     
        "dom" : "tr",
        "destroy" : true,
        "fixedHeader" : true,
        "searching" : false,
        "ordering" : false,
        "language" : {
            "emptyTable" : "No data available."
        },
       "columns" : [ {
                "data" : function(row, type, val, meta) {
                    
​
                    return new Date();
                },
                "className" : "noEdit"
            }, {
                "data" : function(row, type, val, meta) {
                    return new Date();
                },
                "className" : "inlineEditable",
                "editField" : "Date2"
            }, {
                "data" : "To1",
                "className" : "inlineEditable",
                "editField" : "To1"
            }, {
                "data" : "no1",
                "className" : "inlineEditable",
                "editField" : "no1"
            } ],
      "keys" : {
                "columns" : ".inlineEditable",
                "keys" : [ 9 ], // 9 = tab
                "editor" : exampleEditor,
                "editOnFocus" : true
            },
     "buttons" : [ { // custom Edit button
                "text" : "Edit",
                "name" : "edit-task",
                "enabled" : false,
                "className" : "edit-task action-btn " ,
                "action" : function(e, dt, node, config) {
                    
                    if (this.buttons(".edit-task").length) {
                        setDataTableStyle(_dt, true);
                        disableOtherSections();
                        _editMode = true;
                        this.buttons(".edit-task").nodes().removeClass('edit-task').addClass('save-task');
                        this.buttons([ _editBtn ]).text("Save");
                        enableCancelButton();
                    } else {
                        this.buttons([ _editBtn, _cancelBtn ]).disable();
                        saveTasks(e, dt, node, config);
                    }
                }
            },
                  { // custom Cancel button
                "text" : "Cancel",
                "className" : "action-btn " ,
                "enabled" : false,
                "action" : function() {
                    _editMode = false;
                  
                    _dt.rows().every(function(rowIdx, tableLoop, rowLoop) {
                        var data = this.data();
                        //Number = data.taskId.Number;
                        return false;
                    });
​
                  
                    _changedRows.length = 0;
                    _dt.buttons([ _cancelBtn ]).disable();
                 
                    enableOtherSections();
                }
            } ],
   });
  
  
  
  
   
  
   
  
 
  
    
   });
​
​
 var getConfig = function() {
   var DateFormat = "DDMMYYYY";
     return {
            table : '#example',
            idSrc : 'no1',
            fields : [ {
                label : " Date2",
                name : "Date2",
                type : 'datetime',
                def : function() {
                    return new Date();
                },
                opts : {
                    firstDay : 0
                },
                format : DateFormat
            }, {
                label : " To1",
                type : 'select',
                name : "To1",
            }, {
                label : "No1",
                name : "no1"
            } ],
            formOptions : {
                inline : {
                    onBlur : 'submit'
                }
            }
        };
   },
      genSubmitEditorConfig = function(config,Url) {
        return {
            ajax : function(method, url, edits) {
            var selectedTasks = new Object();
                for ( var rowId in edits.data) {
                    var task, editData = edits.data[rowId], rowData = _dt.row('#' + rowId).data();
​
                    // copy over user's edits
                    for ( var editField in editData) {
                        rowData[editField] = editData[editField];
                    }
                  
                }
              
                if (selectedTasks.tasks.length > 0) {
                    $.ajax({
                        method : "PUT",
                        contentType : "application/json; charset=utf-8",
                        dataType : "json",
                        url : Url,
                        data : JSON.stringify(selectedTasks),
                        beforeSend : function(xhr) {
                            
                        }
                    }).done(function(data) {
                        
                            enableOtherSections();
                            
                            // Clear out any saved rows and disable the save / cancel buttons
                            _changedRows.length = 0;
                            _dt.buttons([ _editBtn ]).text("Edit");
                            _dt.buttons([ _editBtn ]).nodes().removeClass('save-task').addClass('edit-task');
                        
                    }).fail(function(jqXHR, textStatus, errorThrown) {
                        
                        // enable the Edit / Cancel buttons
                        enableEditButton();
                        enableCancelButton();
                    });
                } 
            }
        };
    };
​
​
​
​
1 warning
Line 151: The object literal notation {} is preferable.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers