File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!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>
​
</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
 
// 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")
    .on("xhr.dt", function (e, s, json, xhr) {
      if (json === null) {
          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>",
            );
          }
      }
    })
    .DataTable({
      // serverSide:true,
      ajax: {
        url: "404",
        dataSrc: "data",
      },
      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,
    });
});
​
6 errors 4 warnings
Line 2: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 3: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 27: Unexpected ')'.
Line 27: Expected an identifier and instead saw ')'.
Line 27: Expected ')' and instead saw ';'.
Line 27: Missing semicolon.
Line 68: Unexpected ')'.
Line 68: Expected an identifier and instead saw ')'.
Line 68: Expected ')' and instead saw ';'.
Line 68: Missing semicolon.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers