File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
<head>
​
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
<title>Verityvera</title>
​
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="../dist/img/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
    <title>Editor example - Simple inline editing</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css">
    <link rel="stylesheet" type="text/css" href="../editor/css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../editor/ex/resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../editor/ex/resources/demo.css">
    <style type="text/css" class="init">
    
    </style>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
    <script type="text/javascript" language="javascript" src="../editor/js/dataTables.editor.min.js"></script>
    <script type="text/javascript" language="javascript" src="../editor/ex/resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="../editor/ex/resources/demo.js"></script>
    <script type="text/javascript" language="javascript" src="../editor/ex/resources/editor-demo.js"></script>
    
​
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
​
​
    
    
</head>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
​
​
​
  <!-- /.navbar -->
​
 
 
​
​
​
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          
​
      <div class="col-lg-12">
            <div class="card card-primary card-outline">
              
              <div class="card-body">
            
​
                <table id="example" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th></th>
                             <th>Project</th>                           <th width="18%">Date</th>
                            <th>Company Remark</th>
                            <th>Project Status</th>
                            <th>Client Remark</th>
                            <th>Client Status</th>
                        </tr>
                    </thead>
                </table>
​
​
​
​
​
              </div>
            </div>
            <!-- /.card -->
          </div>
​
​
​
 
                 
​
    </div>
    <!-- /.content -->
    </section>
  </div>
  <!-- /.content-wrapper -->
​
 
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
​
​
<script defer class="init">
​
var projects = [
  { label: 'MY 1', value: 1 },{ label: 'MY 2', value: 2 },{ label: 'MY 3', value: 3 },{ label: 'MY 4', value: 4 }];
​
​
​
const editor = new DataTable.Editor({
    ajax: 'indexActionCSCE.php',
    
    
​
    fields: [
            {
            label: 'Project:',
            name: 'psdl_project_id',
            type: 'select',
                options: projects
            },
​
            
​
​
        {
            label: 'Date:',
            name: 'psdl_date',
            type: 'datetime',
                def: () => new Date(),
                displayFormat: 'dddd D MMMM YYYY',
                wireFormat: 'YYYY-MM-DD',
                fieldInfo: 'Verbose date format'
​
            
        },
        {
            label: 'Company Remark:',
            name: 'psdl_co_remark'
        },
        {
            label: 'Project Status:',
            name: 'psdl_co_status',
            type: 'select',
                options: [
                { label: 'Live', value: 'Live' },
                { label: 'Offline', value: 'Offline' }
                ]
            
        },
        {
            label: 'Client Remark:',
            name: 'psdl_cl_remark'
        },
        {
            label: 'Client Status:',
            name: 'psdl_cl_status',
            type: 'select',
                options: [
                { label: 'None', value: '' },               
                { label: 'Live', value: 'Live' },
                { label: 'Offline', value: 'Offline' }
                ]
​
        }
    ],
    table: '#example'
});
​
​
const table = new DataTable('#example', {
    ajax: 'indexActionCSCE.php',
    
​
    scrollX: true,
​
    buttons: [
        { extend: 'create', editor },
        { extend: 'edit', editor },
        { extend: 'remove', editor }
    ],
​
    
    
    
    columns: [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },
        { data: 'psdl_project_id', className: 'editable', render: function (data, type, row) {return projects.find(o => o.value === data).label;}},
        
        
        
        { data: 'psdl_date' , render: DataTable.render.datetime('dddd D MMMM YYYY'), className: 'editable'},
        { data: 'psdl_co_remark', className: 'editable' },
        { data: 'psdl_co_status', className: 'editable' },
        { data: 'psdl_cl_remark',   },
        { data: 'psdl_cl_status',   }
    ],
    
    dom: 'Bfrtip',
    
    
    order: [[2, 'desc']],
    select: {
        style: 'os',
        selector: 'td:first-child'
    }
});
​
​
​
// Activate an inline edit on click of a table cell
table.on('click', 'tbody td.editable', function (e) {
    editor.inline(this);
});
​
​
​
​
editor.on(`open`, function(e, mode, action) {
    fieldOldValue = this.field(`psdl_date`).val();
});
 
editor.on(`preSubmit`, function(e, data, action)
{
var date = '2024-01-01';
    if (fieldOldValue != date){
        this.error( 'Previous Data Edit Not Allowed' );
        return false;
        
    }
});
​
​
editor.on('initCreate', function() {
  editor.disable('psdl_cl_remark');
  editor.disable('psdl_cl_status');
});
​
​
//editor.field('psdl_date').minDate( new Date() );  
editor.field('psdl_date').maxDate( new Date() );
    
    </script>
​
</body>
</html>
​
CSSSaved
 
​
​
JavaScriptSaved
 
​
var table = new DataTable('#example');
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers