dataTables js

by prime90

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <!-- <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.0/slate/bootstrap.min.css" rel="stylesheet" integrity="sha384-idNH3UIOiZbCf8jxqu4iExnH34y5UovfW/Mg8T5WfNvoJolDvknoNqR69V2OexgF" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet" type="text/css">    
    <link href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js" rel="stylesheet" type="text/css">
    {% block title %} {% endblock %}
</head>
  <body>
     <form method="POST">
      <center><input name='ticker'></center>
  </form>
  <div class="container">
      <h1 class="header">Ownership</h1>
      <center><h4 class="title-name">13D/G Filings</h4></center>
          <table class="table table-striped table-sm" id='13D'>
              <thead>
                  <tr>
                      <th>File Date</th>
                      <th>Form</th>
                      <th>Investor</th>
                      <th>Shares</th>
                  </tr>
              </thead>
          </table>
          <center><h4 class="title-name">13F Filings</h4></center>
          <table class="table table-striped table-sm" id='13F' style="width: 100%;">
              <thead style='position: relative; width: 100%;'>
                  <tr>
                      <th>File Date</th>
                      <th>Form</th>
                      <th>Investor</th>
             ...

CSS

.table {
    width: 100%;
}

.title-name {
    color: #eaf5ff;
    padding-top: 1rem;
}

.header {
    color: orangered;
    padding-top: 3rem;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    background-color: orangered;
}

JavaScript

var ownership_13D = [{'File_Date': '2020-03-03', 'Form': '13G/A', 'Investor': 'Justice Family Office Llc', 'Shares': '3,020,753'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}];
// var ownership_13D = NaN
$(document).ready(function() {
    $('#13D').DataTable( {
        "data": ownership_13D,
        "scrollY": 200,
        "scrollCollapse": true,
        "paging": false,
        "columns": [
            { "data": "File_Date" },
            { "data": "Form" },
            { "data": "Investor" },
            { "data": "Shares" },
        ]
    } );
    $('body').find('.dataTables_scrollBody').attr("data-simplebar", "");
    $('body').find('.dataTables_scrollBody').attr("data-simplebar-auto-hide", "false"); 
} );

var ownership_13F = [{'File_Date': '2020-03-03', 'Form': '13G/A', 'Investor': 'Justice Family Office Llc', 'Shares': '3,020,753'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}, {'File_Date': '2020-03-02', 'Form': '13D/A', 'Investor': 'Coffman Raymond Scott', 'Shares': '12,966,437'}];
$(document).ready(function() {
    $('#13F').DataTable( {
        "data": ownership_13F,
        "scrollY": 300,
      ...