File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<link href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.7.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>
<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/fixedheader/3.1.9/css/fixedHeader.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="table" class="table table-striped table-bordered table-compact">
        <thead>
           <tr>
             <th>id</th>
             <th>Accession Number</th>
             <th>Barcode</th>
             <th>AssignedTo</th>
             <th>Status</th>
             <th>Task Name</th>
             <th>Date Reported</th>
          </tr>
​
        </thead>
        <tbody>
          <tr>
          <td>1</td>
          <td>XX21-1234</td>
          <td>XX21-1234</td>
          <td>john doe</td>
          <td>Completed</td>
          <td>task </td>
          <td>2018</td>
          </tr>
          <tr>
          <td>2</td>
          <td>XX22-1234</td>
          <td>XX22-1234</td>
          <td>jane doe</td>
          <td>Open</td>
          <td>task </td>
          <td>2019</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </tfoot>
      </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 () {
//GLOBAL VARS
​
var tab;
var editor;
var statusSelectOptions = [
    {
        "label": "Completed",
        "value": "2"
    },
    {
        "label": "Created",
        "value": "1"
    }
];
var taskSelectOptions = [
    {
        "label": "Missing DOB",
        "value": "2"
    },
    {
        "label": "Missing Name",
        "value": "1"
    },
    {
        "label": "No specimen in container",
        "value": "3"
    }
]
$(document).ready(function(){
    // Setup - add a text input to each head cell
    let count = 0;
    $('#table thead tr').clone(true).appendTo( '#table thead' );
    $('#table thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        count++;
        $(this).html( '<input id ="TextFilter'+count+'" onchange="clearOtherColumnFilter(\'SelectFilter'+count+'\')" type="text" placeholder="Filter by ' + title + '" />' );
        
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                console.log(table.column(i));
                table.column(i).search( this.value ).draw();
            }
        } );
    } );
    
    var timeStampForFileExports = Date.now();
    
    editor = new $.fn.dataTable.Editor({
        fields: [
    {
        "label": "AssignedTo",
        "name": "task.assignedTo",
        "type": "select",
        "options": [
            {
                "label": "dtran",
                "value": "dtran"
            },
            {
                "label": "dyoung",
                "value": "dyoung"
            }
        ]
    },
    {
        "label": "Status",
        "name": "task.statusDefId",
        "type": "select",
        "options": [
            {
                "label": "Completed",
                "value": "2"
            },
            {
                "label": "Created",
                "value": "1"
            }
        ]
    },
    {
        "label": "Task Name",
        "name": "task.taskDefId",
        "type": "select",
        "options": [
            {
                "label": "Missing DOB",
                "value": "2"
            },
            {
                "label": "Missing Name",
                "value": "1"
            },
            {
                "label": "No specimen in container",
                "value": "3"
            }
        ]
    }
]   });
    
    // Activate an inline edit on click of a table cell based on callaName: 'editable'
    $('#table').on( 'click', 'tbody td.editable', function (e) {
        editor.inline( this );
    });
    
    tab = $("#table").DataTable({
        dom: "Bfrtlip",
        columns: 
                [
            {
                "title": "id",
                "data": "task.id"
            },
            {
                "title": "Accession Number",
                "data": "task.accessionNumber"
            },
            {
                "title": "Barcode",
                "data": "task.barcode"
            },
            {
                "title": "AssignedTo",
                "data": "task.assignedTo"
            },
            {
                "title": "Status",
                "data": "task.statusDefId",
                render: function (data, type, row) {
                    return $.grep( statusSelectOptions, function(obj){return obj.value == data;})[0].label;
                }
            },
            {
                "title": "Task Name",
                "data": "task.taskDefId",
                render: function (data, type, row) {
                    return $.grep( taskSelectOptions, function(obj){return obj.value == data;})[0].label;
                }
            },
            {
                "title": "Date Reported",
                "data": "task.date1"
            }
        ],
        orderCellsTop: true,
        fixedHeader: true,
        select: {
            style:      'os',
            selector:   'td:first-child',
            blurable:   true
        },
        buttons: [
            {
                extend: 'copy',
                title: 'Task Queue'
            },
            {
                extend: 'csv',
                filename: 'Task Queue-'+ timeStampForFileExports
            },
            {
                extend: 'excel',
                filename: 'Task Queue-'+ timeStampForFileExports
            },
            {
                extend: 'pdf',
                title: 'Task Queue',
                filename: 'Task Queue-'+ timeStampForFileExports
            },
            {
                extend: 'print',
                title: 'Task Queue'
            },
            { extend: "edit", editor: editor }
        ],
        autoFill: {
            columns: [ 3, 4 ],
            editor:  editor
        },
        keys: {
            editor:  editor
        },
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100, 250, -1], [10, 25, 50, 100, 250, 'All']],
        initComplete: function () {
            let c = 0;
            tab.columns().every( function () {
                c++;
                var column = this;
                var select = $('<select id="SelectFilter'+c+'" onchange="clearOtherColumnFilter(\'TextFilter'+c+'\')"><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column.search( val ? '^'+val+'$' : '', true, false ).draw();
                });
                
                column.data().unique().sort().each( function ( d, j ){
                    select.append( '<option value="'+d+'">'+d+'</option>')
                });
                
                $('select', this.header()).click(function(event) {
                    event.stopPropagation();
                });
            });
        }
    });
}); 
  
} );
​
2 errors 2 warnings
Line 29: Missing semicolon.
Line 32: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 187: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 201: Missing semicolon.
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers