File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="https://nightly.datatables.net/buttons/css/buttons.dataTables.css?_=a2f2f3edc9718bb6bdb965c105d22ce3.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>    
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
    <script src="https://nightly.datatables.net/buttons/js/buttons.html5.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
        <table id="example" class="stripe row-border order-column dataTable no-footer" border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 100%;" bordercolor="#D6D7D9" width="100%" aria-describedby="myTable_info">
    <thead>
        <tr>
            <th class="sorting sorting_asc" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="NCR #: activate to sort column descending" style="width: 42px;">NCR #</th>
            <th class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending" style="width: 81px;">Date</th>
            <th class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Equipment ID: activate to sort column ascending" style="width: 97px;">Equipment ID</th>
            <th class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Location: activate to sort column ascending" style="width: 181px;">Location</th>
            <th class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Observation Name: activate to sort column ascending" style="width: 125px;">Observation Name</th>
            <th class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Inspector: activate to sort column ascending" style="width: 71px;">Inspector</th>
            <th class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="NCR Title: activate to sort column ascending" style="width: 316px;">NCR Title</th>
            <th class="no-sort sorting" id="noPrint" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 87px;">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="sorting_1">1</td>
            <td>Tue Jan 25 2022</td>
            <td>D-1</td>
            <td>Hydraclorialkillerdethamean</td>
            <td>Shell</td>
            <td>MH</td>
            <td> <a href="google.com">Need to weld up all pits 1/4" deep to restore corrosion allowance</a> </td>
            <td id="noPrint">
                <select name="status-93" id="status-93" class="status-select">
                    <option value="">-</option>
                    <option value="Pending" selected="">Pending</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Completed">Completed</option>
                </select>
            </td>
        </tr>
        <tr class="even">
            <td class="sorting_1">2</td>
            <!--td></td-->
            <td>Tue Jan 25 2022</td>
            <!--td>Mark Hardy</td-->
            <td>E-111</td>
            <td>Hydraclorialkillerdethamean</td>
            <td>Shell</td>
            <td>MH</td>
            <td> <a href="form.php?noEdit=1&amp;inspectionID=1643126547247">need ncr</a> </td>
            <td id="noPrint">
                <select name="status-108" id="status-108" class="status-select">
                    <option value="">-</option>
                    <option value="Pending">Pending</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Completed" selected="">Completed</option>
                </select>
            </td>
        </tr>
        <tr class="odd">
            <td class="sorting_1">3</td>
            <!--td></td-->
            <td>Tue Jan 25 2022</td>
            <!--td>Mark Hardy</td-->
            <td>T-111</td>
            <td>Hydraclorialkillerdethamean</td>
            <td>Shell</td>
            <td>MH</td>
            <td> <a href="google.com">test</a> </td>
            <td id="noPrint">
                <select name="status-126" id="status-126" class="status-select">
                    <option value="">-</option>
                    <option value="Pending">Pending</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Completed">Completed</option>
                </select>
            </td>
        </tr>
        <tr class="even">
            <td class="sorting_1">4</td>
            <td>Tue Jan 25 2022</td>
            <!--td>Mark Hardy</td-->
            <td>D-1</td>
            <td>Hydraclorialkillerdethamean</td>
            <td>Bottom Head</td>
            <td>MH</td>
            <td> <a href="google.com">fix it</a> </td>
            <td id="noPrint">
                <select name="status-96" id="status-96" class="status-select">
                    <option value="">-</option>
                    <option value="Pending">Pending</option>
                    <option value="Approved" selected="">Approved</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Completed">Completed</option>
                </select>
            </td>
        </tr>
        <tr class="odd">
            <td class="sorting_1">5</td>
            <!--td></td-->
            <td>Wed Jan 26 2022</td>
            <!--td>Mark Hardy</td-->
            <td>e-test</td>
            <td>Hydraclorialkillerdethamean</td>
            <td>Stationary Tube Sheet</td>
            <td>MH</td>
            <td> test</a> </td>
            <td id="noPrint">
                <select name="status-129" id="status-129" class="status-select">
                    <option value="">-</option>
                    <option value="Pending" selected="">Pending</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected">Rejected</option>
                    <option value="Completed">Completed</option>
                </select>
            </td>
        </tr>
        <tr class="even">
            <td class="sorting_1">6</td>
            <td>Wed Jan 26 2022</td>
            <td>e-test</td>
            <td>Hydraclorialkillerdethamean</td>
            <td>Tube Sheet</td>
            <td>MH</td>
            <td><a href="google.com">test12</a> </td>
            <td id="noPrint">
                <select name="status-130" id="status-130" class="status-select">
                    <option value="">-</option>
                    <option value="Pending">Pending</option>
                    <option value="Approved">Approved</option>
                    <option value="Rejected" selected="">Rejected</option>
                    <option value="Completed">Completed</option>
                </select>
            </td></tr>
    </tbody>
</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 () {
   $('#example').DataTable( {
        "dom": 'Bfrtip',
        buttons: [
         'copy',
         {
                    extend: 'print',
                    title: 'title'
                    
         },
                 { 
                extend: 'excel',
                title: 'excel title'
            },          
        ]
    } );
} );
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers