File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
​
    
    <link href="https://cdn.datatables.net/1.10.17/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
        <script src="https://nightly.datatables.net/js/dataTables.bootstrap4.min.js"></script>
​
    <link href="https://nightly.datatables.net/buttons/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/buttons/js/dataTables.buttons.js"></script>
    <script src="https://nightly.datatables.net/buttons/js/buttons.bootstrap4.min.js"></script>
​
    
    <link href="https://nightly.datatables.net/select/css/select.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/select/js/dataTables.select.js"></script>
​
    
       <link href="https://editor.datatables.net/extensions/Editor/css/editor.bootstrap4.min.css" r="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
    <script src="https://editor.datatables.net/extensions/Editor/js/editor.bootstrap4.min.js"></script>
​
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <table class='menu_table'>
 <tr><td>
   <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.php"><img src="images/040Logo2.png" alt="Home" style="width:40px;">  Investigation Unit &nbsp;&nbsp;</a>
    
<article>
        <nav id="main_nav">
            <ul>
                <li>
                    <a href="cases-db.php"><i class="fad fa-briefcase"></i> Cases</a>
<!--                        <ul>
                            <li><a href="cases-db.php"><i class="fad fa-folder-open"></i> New/Edit</a></li>
                            <li><a href=""><i class="fad fa-archive"></i> Search Archive</a></li>
                        </ul>
-->             </li>
    
                <li>                    
                    <a href="#"><i class="fad fa-fingerprint"></i> Forensics</a>
                        <ul>
                            <li><a href="#"><i class="fad fa-mobile-android-alt"></i> Cell Phones</a></li>
                            <li><a href="#"><i class="fad fa-car"></i> Infotainment</a></li>
                            <li><a href="#"><i class="fad fa-microchip"></i> Chip Offs</a></li>
                        </ul>
                </li>
                        
                        <li>
                    <a href="#"><i class="fad fa-tools"></i> Tools</a>
                    <ul>
                    <li>
                    <a href="#"><i class="fad fa-inventory"></i> Inventory</a>
                    <ul>
                        <li>
                            <a href="#"><i class="fad fa-hdd"></i> Storage Devices</a>
                            <ul>
                                <li><a href="hard_drive-db.php"><i class="fad fa-database"></i> Hard Drives</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fad fa-mobile-android-alt"></i> Cell Phones</a>
                            <ul>
                                <li><a href="cellphone_inventory-db.php"><i class="fad fa-tools"></i> Parts</a></li>
                            </ul>
                        </li>
                    </ul>
                    <li>
                            <a href="#"><i class="fad fa-analytics"></i> Analytics</a>
                            <ul>
                                <li><a href="#"><i class="fad fa-forklift"></i> Work Loads</a></li>
                                <li><a href="#"><i class="fad fa-suitcase-rolling"></i> Types of Cases</a></li>
                            </ul>
                        </li>
                </li>
                <li>
                    <a href="department_addressbook-db.php"><i class="fad fa-address-book"></i> Address Book</a>
                </li>
                        <li>
                            <a href="#"><i class="fab fa-gitkraken"></i> Kraken</a>
                        </li>
                        <li>
                            <a href="#"><i class="fad fa-book-user"></i> IP</a>
                            <ul>
                                <li><a href="3"><i class="fab fa-fort-awesome"></i> Domains</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                        
                        <li>                    
                    <a href="#"><i class="fad fa-cogs"></i> Settings</a>
                    <ul>
                        <li><a href="users-db.php"><i class="fad fa-mobile-android-alt"></i> Users</a></li>
                        <li><a href=""><i class="fad fa-broom"></i> Db Maintenance</a></li>
                    </ul>
                </li>
                
                <li>
                    <a href="logout.php"><i class="fad fa-sign-out-alt"></i> Logout</a>
                </li>
            </ul>
        </nav>
        </article>
            </nav>
​
​
 </td></tr>
 <tr>
   <td>
    <table width='100%'>
     <tr><td>
       Cases</td><td>superuser</td><td>Welcome User
     </td></tr>
   </table>
 </tr>
</table>
​
<div id='myForm'>
    <fieldset class='cases_details'>
        <legend><i class='fad fa-folder-open'></i> CREATE NEW CASE</legend>
        <editor-field name='cases.case_number'></editor-field>
        <editor-field name='cases.csirs_number'></editor-field>
        <editor-field name='cases.evidence_number'></editor-field>
        <editor-field name='cases.report_date'></editor-field>
        <editor-field name='cases.start_date'></editor-field>
        <editor-field name='cases.close_date'></editor-field>
        <editor-field name='cases.incident_type'></editor-field>
        <editor-field name='cases.incident_subtype'></editor-field>
        <editor-field name='cases.category'></editor-field>
        <editor-field name='cases.status'></editor-field>
    </fieldset>
    <fieldset class='department_details'>
        <editor-field name='cases.investigator_id'></editor-field>
        <editor-field name='cases.department'></editor-field>
        <editor-field name='cases.warrant_number'></editor-field>
        <editor-field name='cases.number_warrants'></editor-field>
        <editor-field name='cases.malware_resulted'></editor-field>
        <editor-field name='cases.arrest_resulted'></editor-field>
        <editor-field name='cases.synopsis'></editor-field>
        <editor-field name='cases.notes'></editor-field>
    </fieldset>
</div>
​
<div class='container-fluid'>
 <table class='table-responsive'>
    <tr><td style='height:148px;'>&nbsp;</td></tr>
 </table>
​
<table class='table-responsive'>
    <tr>
        <td>
            <div class='container-fluid'>
                <label id='resetCols' class='button'><input type='submit' class='btn btn-primary' name='resetCols' value='Reset Columns'></input></label>
            </div>
        </td>
    </tr>
</table>
​
<table id='cases' class='table table-striped table-bordered dt-responsive dt-body-right'>
        <thead class='thead-grey dt-head-center'>
            <tr>
                <th>Case Number</th>
                <th>CSIRS Number</th>
                <th>Evidence Number</th>
                <th>Reported Date</th>
                <th>Investigation Start Date</th>
                <th>Close Date</th>
                <th>Incident Type</th>
                <th>Incident Subtype</th>
                <th>Department</th>
                <th>Category</th>
                <th>Status</th>
                <th>Investigator</th>
                <th>Warrant Number</th>
                <th>Number of Warrants Written</th>
                <th>Arrest Resulted</th>
                <th>Malware Resulted</th>
                <th>Synopsis</th>
                <th>Notes</th>
            </tr>
        </thead>
  <tbody>
          <tr id="1">
            <td>0001</td>
            <td>0</td>
            <td></td>
            <td>1960-3-23</td>
            <td>1960-3-24</td>
            <td>1961-6-3</td>
            <td>Type2</td>
            <td>Subtype5</td>
            <td>Department of 3</td>
            <td>Administrative</td>
            <td>Completed</td>
            <td>Green</td>
            <td></td>
            <td></td>
            <td>yes</td>
            <td>n0</td>
            <td>Something happened to PC</td>
            <td>More details here</td>
          </tr>
          <tr id="2">
            <td>0002</td>
            <td>0</td>
            <td></td>
            <td>1960-3-23</td>
            <td>1960-3-24</td>
            <td>1961-6-3</td>
            <td>Type2</td>
            <td>Subtype5</td>
            <td>Department of 3</td>
            <td>Administrative</td>
            <td>Completed</td>
            <td>Green</td>
            <td></td>
            <td></td>
            <td>yes</td>
            <td>n0</td>
            <td>Something happened to PC</td>
            <td>More details here</td>
          </tr>
          <tr id="3">
            <td>0003</td>
            <td>0</td>
            <td></td>
            <td>1960-3-23</td>
            <td>1960-3-24</td>
            <td>1961-6-3</td>
            <td>Type2</td>
            <td>Subtype5</td>
            <td>Department of 3</td>
            <td>Administrative</td>
            <td>Completed</td>
            <td>Green</td>
            <td></td>
            <td></td>
            <td>yes</td>
            <td>n0</td>
            <td>Something happened to PC</td>
            <td>More details here</td>
          </tr>
          <tr id="4">
            <td>0004</td>
            <td>0</td>
            <td></td>
            <td>1960-3-23</td>
            <td>1960-3-24</td>
            <td>1961-6-3</td>
            <td>Type2</td>
            <td>Subtype5</td>
            <td>Department of 3</td>
            <td>Administrative</td>
            <td>Completed</td>
            <td>Green</td>
            <td></td>
            <td></td>
            <td>yes</td>
            <td>n0</td>
            <td>Something happened to PC</td>
            <td>More details here</td>
          </tr>
          <tr id="5">
            <td>0005</td>
            <td>0</td>
            <td></td>
            <td>1960-3-23</td>
            <td>1960-3-24</td>
            <td>1961-6-3</td>
            <td>Type2</td>
            <td>Subtype5</td>
            <td>Department of 3</td>
            <td>Administrative</td>
            <td>Completed</td>
            <td>Green</td>
            <td></td>
            <td></td>
            <td>yes</td>
            <td>n0</td>
            <td>Something happened to PC</td>
            <td>More details here</td>
          </tr>
          <tr id="6">
            <td>0006</td>
            <td>0</td>
            <td></td>
            <td>1960-3-23</td>
            <td>1960-3-24</td>
            <td>1961-6-3</td>
            <td>Type2</td>
            <td>Subtype5</td>
            <td>Department of 3</td>
            <td>Administrative</td>
            <td>Completed</td>
            <td>Green</td>
            <td></td>
            <td></td>
            <td>yes</td>
            <td>n0</td>
            <td>Something happened to PC</td>
            <td>More details here</td>
          </tr>
        </tbody>
  
    </table>
  </div>
​
​
​
    <div class="container">
      <table id="example" class="table table-striped table-bordered" 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;
}
​
#middle-align {
    margin: 0 auto;
    position: relative;
    text-align: center;
    border-radius: 0;
    font-size: 10px;
}
/* Stop Line Break inside Cell */
.dt-body-nowrap {
   white-space: nowrap;
}
/* Center Table Head Text */
.dt-head-center {
   text-align: center;
}
table.menu_table {
    position: fixed;
    top: 0px;
    z-index: 5;
    background: rgba(255, 255, 255, 1);
    font-family: Helvetica;
    color: grey;
    background-color: #343a40;
    width: 100%;
/*  opacity: 0.2; */
}
table.button_table {
    position: fixed;
    top: 135px;
    z-index: 4;
    background: rgba(255, 255, 255, 1);
    font-family: Helvetica;
    color: grey;
    background-color: white;
    width: 100%;
/*  opacity: 0.2; */
}
table.db_restore {
    font-family: Helvetica;
    background-color: #e3eaf2;
    border-spacing: 50px;
    border-collapse: seperate;
    width: 100%;
}
td.db_restore {
    font-family: Helvetica;
    vertical-align: top;
    border-spacing: 50px;
    border-collapse: seperate;
}
th.db_restore, td.db_restore {
    padding: 5px;
    text-align: left;
    border-spacing: 50px;
    border-collapse: seperate;
}
thead.thead-grey {
    background-color: #343a40;
    color: white;
}
h5.db_restore {
    font-family: Helvetica;
    text-decoration: underline;
}
table.db_maintenance {
    font-family: Helvetica;
    background-color: #e3eaf2;
    padding: 5px;
    border-spacing: 50px;
    width: 100%;
}
td.db_maintenance {
    font-family: Helvetica;
    border-spacing: 50px;
    vertical-align: top;
}
th.db_maintenance, td.db_restore {
    padding: 5px;
    border-spacing: 50px;
    text-align: left;
}
h5.db_maintenance {
    font-family: Helvetica;
    text-decoration: underline;
}
div.dom_wrapper {
    position: fixed;
    top: 90px;
    padding: 2px;
    z-index: 1;
    background: rgba(255, 255, 255, 1);  /* hide the scrolling table */
    width: 100%;
\\  opacity: 0.2; 
}
​
div.dataTables_wrapper div.dataTables_info {
    padding-top: 1.2em;
}
​
div.dataTables_wrapper div.dataTables_length {
    padding-top: 1.0em;
}
​
div.dataTables_wrapper div.dataTables_filter {
    padding-top: 1.0em;
}
​
div.dataTables_wrapper div.dataTables_paginate {
    padding-top: 0.6em;
}
​
.dt-buttons {
    padding-top: 0.4em;
}
​
article {
            width: 1500px;
            margin: 0 auto;
            background: #343a40;
            color: #f0f0f0;
            border-radius: 0px;
        }
        #main_nav ul {
            background: #343a40;
            float: left;
            -webkit-transition: .5s;
            transition: .5s;
        }
        #main_nav li {
            float: left;
            position: relative;
            width: 140px;
            list-style: none;
            -webkit-transition: .5s;
            transition: .5s;
        }
        #main_nav > ul > li > a {
            text-transform: uppercase;
            font-size: 10pt;
        }
        #main_nav a {
            display: block;
            text-decoration: none;
            padding: 5px 5px;
            color: #fff;
        }
        #main_nav ul ul {
            position: absolute;
            left: 0;
            top: 100%;
            visibility: hidden;
            opacity: 0;
        }
        #main_nav ul ul ul {
            left: 100%;
            top: 0;
        }
        #main_nav ul ul ul ul {
            left: 100%;
            top: 0;
        }
        #main_nav li:hover, #main_nav li:hover li {
            background: #343a40;
        }
        #main_nav li li:hover, #main_nav li li:hover li {
            background: #0274d8;
        }
        #main_nav li li li:hover {
            background: #809fff;
        }
        #main_nav li:hover > ul {
            visibility: visible;
            opacity: 1;
        }
​
#myForm {
    display: flex;
    flex-flow: row nowrap;
    background-color: white;
    width: auto;
//  position: sticky;
//  z-index: 65000;
}
#myForm > div {
    width: auto;
    margin: 1px;
    padding: 1px;
    font-size: 14px;
//  position: sticky;
//  z-index: 65000;
}
#myForm fieldset {
    flex: 1;
    border: 3px solid #4286f4;
    margin: 0.5em;
}
#myForm fieldset legend {
    padding: 5px 20px;
    border: 1px solid #aaa;
    font-weight: bold;
    font-size: 14px;
    width: 45%;
}
#myForm fieldset.cases_details {
    flex: 1 30%;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-between;
}
#myForm fieldset.department_details {
    flex: 1 70%;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: space-between;
}
#myForm fieldset.cases_details legend {
    background: #4286f4;
}
#myForm div.DTE_Field {
    padding: 4px;
    width: auto;
}
#myForm div.DTED_Lightbox_Wrapper {
//    position: fixed;
    left: 1em;
    right: 1em;
    margin-left: 0;
    width: auto;
//  z-index: 65000;
}
#myForm div.DTE_Body div.DTE_Form_Content {
    width: auto;
    display: flex;
    flex-flow: row wrap;
    background-color: white;
//  z-index: 65000;
}
#myForm div.DTE_Body div.DTE_Body_Content div.DTE_Field {
    width: auto;
    padding: 0px 0px;
    box-sizing: border-box;
//  z-index: 65000;
}
​
​
.modal-dialog {
    max-width: 1200px;
}
JavaScriptSaved
 
$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'cases-con.php',
        table: '#cases',
        template: '#myForm',
//      display: 'lightbox',
        i18n: {
            create: {
                button: 'New',
                title:  ' ',
                submit: 'Save'
            }
        },
        fields: [ {
                label: 'Case Number:',
                name: 'cases.case_number'
              }, {
                label: 'CSIRS Number:',
                name: 'cases.csirs_number'
              }, {
                label: 'Evidence Number:',
                name: 'cases.evidence_number'
              }, {
                label: 'Reported Date:',
                name: 'cases.report_date',
                type: 'datetime',
                opts: { firstDay: 0}
              }, {
                label: 'Investigation Start Date:',
                name: 'cases.start_date',
                type: 'datetime',
                opts: { firstDay: 0}
              }, {
                label: 'Close Date:',
                name: 'cases.close_date',
                type: 'datetime',
                opts: { firstDay: 0}
              }, {
                label: 'Incident Type:',
                name: 'cases.incident_type',
                type: 'select'
              }, {
                label: 'Incident Subtype:',
                name: 'cases.incident_subtype',
                type: 'select'
              }, {
                label: 'Department:',
                name: 'cases.department',
                type: 'select'
              }, {
                label: 'Category:',
                name: 'cases.category',
                type: 'select'
              }, {
                label: 'Status:',
                name: 'cases.status',
                type: 'select',
                def: 3
              }, {
                label: 'Investigator:',
                name: 'cases.investigator_id',
                type: 'select'
              }, {
                label: 'Investigator Name:',
                name: 'cases.investigator_full_name',
                type: 'hidden',
                def: 1
              }, {
                label: 'Warrant Number:',
                name: 'cases.warrant_number',
                type: 'textarea',
                attr: {
                    placeholder: 'One per line'
                }
              }, {
                label: 'Number of Warrants Written:',
                name: 'cases.number_warrants',
                type: 'textarea',
                attr: {
                    rows: 2,
                    cols: 10,
                    placeholder: 'Enter only numbers'
                }
              }, {
                label: 'Arrest Resulted:',
                name: 'cases.arrest_resulted',
                type: 'checkbox',
                options: [
                    { label: 'yes', value: 'yes' }
                ],
                separator: ',',
                unselectedValue: 'no'
              }, {
                label: 'Malware Resulted:',
                name: 'cases.malware_resulted',
                type: 'checkbox',
                options: [
                    { label: 'yes', value: 'yes' }
                ],
                separator: ',',
                unselectedValue: 'no'
              }, {
                label: 'Synopsis:',
                name: 'cases.synopsis',
                type: 'textarea',
                attr: {
                    rows: 2,
                    cols: 104
                }
              }, {
                label: 'Notes:',
                name: 'cases.notes',
                type: 'textarea',
                attr: {
                    rows: 5,
                    cols: 104
                }
              }
        ] 
    } );
​
/*editor.dependent( 
    'cases.zipcode',
    function(val, data, callback) {
    editor
        .field( 'cases.city' ).set( editor.field('cases.zipcode').val() );
  },
  {
        event: 'keyup change'
  });
*/
​
    var table=$('#cases').DataTable( {
        dom: "<'row dom_wrapper fh-fixedHeader'B<'col-sm col-md'>i<'col-sm col-md'>l<'col-sm col-md'>f<'col-sm col-md'>p>" +
    "<'row'<'col-sm col-md'tr>>" +
    "<'row'<'col-sm col-md'i><'col-sm col-md'>p>",
        ajax: 'cases-con.php',
//      colReorder: true,
/*      rowReorder: true,
        rowReorder: {
            selector: 'tr'
        },
*/
        buttons: [
            {
                extend: 'create',
                editor: editor,
                formButtons: [
                    { text: 'Create', className: 'btn btn-default btn-primary', action: function () { this.submit(); }},
                    { text: 'Cancel', className: 'btn btn-default btn-danger', action: function () { this.close(); } }
                ]
            },
            {
                extend: 'edit',
                editor: editor,
                formButtons: [
                    { text: 'Save', className: 'btn btn-default btn-primary', action: function () { this.submit(); }},
                    { text: 'Cancel', className: 'btn btn-default btn-danger', action: function () { this.close(); } }
                ]
            },
            { extend: 'remove', editor: editor }
        ],
        columns: [
            { data: 'cases.case_number' },
            { data: 'cases.csirs_number' },
            { data: 'cases.evidence_number' },
            { data: 'cases.report_date' },
            { data: 'cases.start_date' },
            { data: 'cases.close_date' },
            { data: 'lk_incident_types.incident_type' },
            { data: 'lk_incident_subtypes.incident_subtype' },
            { data: 'lk_departments.department' },
            { data: 'lk_category.category' },
            { data: 'lk_status.status' },
//          { data: 'tbl_invest_id.user_id' },
//          { data: 'tbl_invest_name.full_name' },
            { data: null, render: function ( data, type, row ) {
                // Combine the investigator id, and ful name into a single table field
                return data.tbl_invest_id.user_id+'-'+data.tbl_invest_name.full_name;
                } 
            },
            { data: 'cases.warrant_number' },
            { data: 'cases.number_warrants' },
            { data: 'cases.arrest_resulted' },
            { data: 'cases.malware_resulted' },
            { data: 'cases.synopsis' },
            { data: 'cases.notes' },
         ],
        'aLengthMenu': [[10, 25, 50, -1], ['10', '25', '50', 'All']],
        'iDisplayLength': 50,
        responsive: true,
        select: true,
        stateSave: true,
        fixedHeader: {
            header: true,
            headerOffset: 145
        }
    } );
        $('#resetCols').on( 'click', function (e) {
           table.colReorder.reset();
        } );
} );
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers