File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
​
<link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.1.8/b-3.2.0/b-html5-3.2.0/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.1.8/b-3.2.0/b-html5-3.2.0/datatables.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</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="img/note.png"></a></td> <!-- Note -->
            <td><img src="img/checkmark.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="img/note.png"></a></td> <!-- Note -->
            <td><img src="img/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>
    </tbody>
</table>
    </div>
  </body>
</html>
​
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
​
$(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);
    }
};
​
  
  let tabledata = $('#dttable').DataTable( {
layout: {
    topStart: {
        buttons: [
            {
                header: false,
                extend: 'excel',
              exportOptions: exportOptions
            }
        ]
    }
},
      order: [[7, 'desc']], // 7 = date column
        pageLength: 25,
        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().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().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));
                        });
                })
        }
    });
});
1 error 9 warnings
Line 3: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 12: '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).
Line 76: Missing semicolon.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers