Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DWM TOOL</title>
    
    <!-- External CSS Libraries -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" crossorigin="anonymous">
    
    <!-- Chart Libraries -->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
    
    <!-- PDF Generation Library -->
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
    
    <!-- Math Library -->
    <script src="https://cdn.jsdelivr.net/npm/mathjs@11.11.0/lib/browser/math.min.js"></script>
    
    <!-- DataTables Library -->
    <link href="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.6/af-2.6.0/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.10.0/r-2.5.0/rg-1.4.1/rr-1.4.1/sc-2.2.0/sb-1.6.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css" rel="stylesheet">
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    
    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    
    <!-- Your Custom Styles -->
    <link rel="stylesheet" href="/css/style.css">
    
    <!-- Tooltip Initialization -->
    <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
    </script>
    </head>
    <body>
​
<section id="main">
  <div class="p-auto m-auto table-responsive my-3">
                                <table class="table table-striped table-hover table-borderless border-dark align-top nowrap " id="table2">
                                    <caption class="caption-top text-white ">Table 2 with ajax(rows.txt for data)</caption>
                                        <thead>
                                            <tr class="fw-bolder align-top">
                                                <th scope="col">Name</th>
                                                <th scope="col">Position</th>
                                                <th scope="col">Office</th>
                                                <th scope="col">Extn.</th>
                                                <th scope="col">Start date</th>
                                                <th scope="col">Salary</th>
                                            </tr>
                                        </thead>
                                        <tbody class="table-group-divider">
                                            <tr scope="row">
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </tbody>
                                </table>
            </div>
</section>
​
    <!-- JavaScript Scripts -->
    <!-- External Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    
    <!-- EXTERNAL DATATABLE PLUGINS  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.6/af-2.6.0/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.10.0/r-2.5.0/rg-1.4.1/rr-1.4.1/sc-2.2.0/sb-1.6.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.js"></script>
​
    <script type="module" src="/src/datatablescript.js"></script>
    
</body>
</html>
 
// Listen for Bootstrap tab change to adjust col width when tab becomes visible to users
document.querySelectorAll('a[data-bs-toggle="tab"]').forEach((el) => {
   el.addEventListener('shown.bs.tab', () => {
       DataTable.tables({ visible: true, api: true }).columns.adjust();
   });
});
​
///table 2 ajax data with arrays
$(document).ready(function () {
    $('#table2').DataTable({
      // serverSide:true,
      ajax:{
         url: '../testdata/rows.json',
         dataSrc: "data",
         error: function (xhr, error, thrown) {
            if (xhr.status === 404) {
               $('#table2').DataTable().clear().draw();
               $('#table2').DataTable().row.add([
                  "404 Error",
                  "The requested resource was not found.",
                  "", // Add empty columns for other data
               ]).draw();
                $('#table2').html('<b>404 Error: Data source not found.</b>');
            } else {
                $('#table2').html('<b>An error occurred while fetching data: ' + error + '</b>');
            }
        }
      },
      columnDefs:[
         //default content for all columns in case of empty or data not found
         {targets: '_all',  defaultContent: '<b>No Data To Display</b>'}
      ],
      columns:[
      { data: 'name' },
        { data: 'hr.position' },
        { data: 'contact.0' },
        { data: 'contact.1' },
        { data: 'hr.start_date' },
        { data: 'hr.salary' }
      ],
      "deferRender": true,
      select: true, //select rows OS style
      colReorder: true, // to click and drag cols to reorder
      keys: true, //to add keyboard interation
      "processing": true, // to add processing message in case of large data taking time to process
      "dom":'<"text-light"<"top"lf><"bg-dark text-dark">tr<"bottom"<"#tableButtons"B>ip>>', // handles display of elements with bootstrap5 text coloring
      buttons: [
         {
            extend: 'copy',
            text: 'Copy to clipboard'
        },
        {
         text: 'JSON',
         action: function ( e, dt, button, config ) {
             var data = dt.buttons.exportData();
​
             $.fn.dataTable.fileSave(
                 new Blob( [ JSON.stringify( data ) ] ),
                 'Datatable-Export.json'
             );
         }
       },'excel', 'pdf','createState', 'savedStates', 'colvis'  
     ], // to show buttons for exports
   // "autoWidth": false,
//   "scrollX": true, 
   // "lengthChange": false, // to remove length change button when limiting view of data
   // "paging": false,
   "scrollY":400,
  "scrollCollapse": true,
   });
} );
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers