File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/3.2.0/css/buttons.dataTables.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.html5.min.js"></script>
    <meta charset="utf-8" />
    <title>DataTables - JS Bin - sample</title>
  </head>
  <body>
    <div class="container">
<table id="dttable" class="display">
    <thead>
        <tr>
            <th>Order</th>
            <th>Note</th>
            <th>Checked</th>
            <th>User identification</th>
            <th>Manufacturer</th>
            <th>Model</th>
            <th>Type</th>
            <th>Date registered</th>
            <!-- hidden values -->
            <th>hash_id</th>
            <th>nhsm_id</th>
            <th>user_id</th>
        </tr>
        <tr data-dt-order="disable">
            <th>Order</th> <!-- searchfield -->
            <th></th>
            <th></th>
            <th>User identification</th> <!-- searchfield -->
            <th>Manufacturer</th> <!-- dropdown -->
            <th>Model</th> <!-- dropdown -->
            <th></th>
            <th></th>
            <!-- hidden values -->
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>21182833</td> <!-- Order -->
            <td><a href="somelink.php?id=21182833"><img src="https://assets.scu.edu/images/icon/note.png"></a></td> <!-- Note -->
            <td><img src="https://assets.scu.edu/images/icon/tick.png"></td> <!-- Checked -->
            <td>LfhEzmtd35</td> <!-- User identification -->
            <td>Trianta Int.</td> <!-- Manufacturer -->
            <td>P238</td> <!-- Model -->
            <td>2</td> <!-- Type -->
            <td>2024-02-09</td> <!-- Date -->
            <!-- hidden values -->
            <td>11241821</td> <!-- hash_id -->
            <td>4006</td> <!-- nhsm_id -->
            <td>23383</td> <!-- user_id -->
        </tr>
        <tr>
            <td>21191924</td> <!-- Order -->
            <td><a href="somelink.php?id=21191924"><img src="https://assets.scu.edu/images/icon/note.png"></a></td> <!-- Note -->
            <td><img src="https://assets.scu.edu/images/icon/cross.png"></td> <!-- Checked -->
            <td>OxBak6P52O</td> <!-- User identification -->
            <td>Diantra Limited</td> <!-- Manufacturer -->
            <td>P288</td> <!-- Model -->
            <td>4</td> <!-- Type -->
            <td>2024-05-04</td> <!-- Date -->
            <!-- hidden values -->
            <td>30433750</td> <!-- hash_id -->
            <td>5038</td> <!-- nhsm_id -->
            <td>69731</td> <!-- user_id -->
        </tr>
        <tr>
            <td>21191925</td> <!-- Order -->
            <td><a href="somelink.php?id=21191925"><img src="https://assets.scu.edu/images/icon/note.png"></a></td> <!-- Note -->
            <td><img src="https://assets.scu.edu/images/icon/cross.png"></td> <!-- Checked -->
            <td>L6hbZxA0zq</td> <!-- User identification -->
            <td>Diantra Limited</td> <!-- Manufacturer -->
            <td>P238</td> <!-- Model -->
            <td>2</td> <!-- Type -->
            <td>2024-03-06</td> <!-- Date -->
            <!-- hidden values -->
            <td>30433751</td> <!-- hash_id -->
            <td>5039</td> <!-- nhsm_id -->
            <td>69732</td> <!-- user_id -->
        </tr>
        <tr>
            <td>21191926</td> <!-- Order -->
            <td><a href="somelink.php?id=21191926"><img src="https://assets.scu.edu/images/icon/note.png"></a></td> <!-- Note -->
            <td><img src="https://assets.scu.edu/images/icon/tick.png"></td> <!-- Checked -->
            <td>pLtI9wXUJY</td> <!-- User identification -->
            <td>Trianta Int.</td> <!-- Manufacturer -->
            <td>P288</td> <!-- Model -->
            <td>2</td> <!-- Type -->
            <td>2024-06-03</td> <!-- Date -->
            <!-- hidden values -->
            <td>30433752</td> <!-- hash_id -->
            <td>5040</td> <!-- nhsm_id -->
            <td>69733</td> <!-- user_id -->
        </tr>
        <tr>
            <td>21191927</td> <!-- Order -->
            <td><a href="somelink.php?id=21191927"><img src="https://assets.scu.edu/images/icon/note.png"></a></td> <!-- Note -->
            <td><img src="https://assets.scu.edu/images/icon/tick.png"></td> <!-- Checked -->
            <td>EQtJkZhAIg</td> <!-- User identification -->
            <td>Diantra Limited</td> <!-- Manufacturer -->
            <td>P238</td> <!-- Model -->
            <td>4</td> <!-- Type -->
            <td>2024-11-04</td> <!-- Date -->
            <!-- hidden values -->
            <td>30433753</td> <!-- hash_id -->
            <td>5041</td> <!-- nhsm_id -->
            <td>69734</td> <!-- user_id -->
        </tr>
        <tr>
            <td>21191928</td> <!-- Order -->
            <td><a href="somelink.php?id=21191928"><img src="https://assets.scu.edu/images/icon/note.png"></a></td> <!-- Note -->
            <td><img src="https://assets.scu.edu/images/icon/tick.png"></td> <!-- Checked -->
            <td>iyxxh2aHVi</td> <!-- User identification -->
            <td>Trianta Int.</td> <!-- Manufacturer -->
            <td>P238</td> <!-- Model -->
            <td>2</td> <!-- Type -->
            <td>2024-05-05</td> <!-- Date -->
            <!-- hidden values -->
            <td>30433754</td> <!-- hash_id -->
            <td>5042</td> <!-- nhsm_id -->
            <td>69735</td> <!-- user_id -->
        </tr>
        <tr>
            <td>21191929</td> <!-- Order -->
            <td><a href="somelink.php?id=21191929"><img src="https://assets.scu.edu/images/icon/note.png"></a></td> <!-- Note -->
            <td><img src="https://assets.scu.edu/images/icon/tick.png"></td> <!-- Checked -->
            <td>VIwNyj2IyD</td> <!-- User identification -->
            <td>Trianta Int.</td> <!-- Manufacturer -->
            <td>P288</td> <!-- Model -->
            <td>1</td> <!-- Type -->
            <td>2023-01-01</td> <!-- Date -->
            <!-- hidden values -->
            <td>30433755</td> <!-- hash_id -->
            <td>5043</td> <!-- nhsm_id -->
            <td>69736</td> <!-- user_id -->
        </tr>
    </tbody>
</table>
    </div>
  </body>
</html>
​
CSSSaved
 
body {
    font: .8em Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
table {
    font: 90%/1.45em Arial, Helvetica, sans-serif;
    color: #333;
    width: 100%;
}
div.container {
    max-width: 96%;
    margin: 0 auto;
}
.dt-search { display: none; }
JavaScriptSaved
 
​
$(document).ready(function() {
let exportOptions = {
    customizeData: function (data) {
        // Remove the second header row by popping it off the array
        data.headerStructure.pop();
        //console.log(data.headerStructure);
    }
};
  
  let tabledata = $('#dttable').DataTable( {
layout: {
    topStart: {
        buttons: [
            {
                //header: false,
                extend: 'excel',
                exportOptions: exportOptions
            }
        ]
    }
},
    orderCellsTop: true,
      order: [[7, 'desc']], // 7 = date column
        pageLength: 5,
        columnDefs: [{
            target: [8, 9, 10],
            visible: false,
            searchable: false
        }],
        initComplete: function() {
            this.api()
                .columns([0, 3]) // first & fourth column are searchfields
                .every(function() {
                    let column = this;
                    let title = column.header().textContent;
 
                    // create input element
                    let input = document.createElement('input');
                    input.placeholder = title;
                    column.header( 1 ).replaceChildren(input);
 
                    // event listener for user input
                    input.addEventListener('keyup', () => {
                        if (column.search() !== this.value) {
                            column.search(input.value).draw();
                        }
                    });
                })
                .columns([4, 5]) // fifth & sixth colum are dropdowns
                .every(function() {
                    let column = this;
                    let title = column.header().textContent;
 
                    // create select element
                    let select = document.createElement('select');
                    select.id = title +'_select';
                    select.add(new Option(''));
                    column.header(1).replaceChildren(select);
 
                    // apply listener for user change in value
                    select.addEventListener('change', function() {
                        column
                            .search(select.value, { exact: true })
                            .draw();
                    });
 
                    // add list of options
                    column
                        .data()
                        .unique()
                        .sort()
                        .each(function(d, j) {
                            select.add(new Option(d));
                        });
                });
        }
    });
});
9 warnings
Line 3: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 11: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 35: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 36: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 39: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 44: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 52: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 53: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 56: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers