File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
​
  <style type="text/css">
      #marketing-report .btn-filter {
          width: 100%;
      }
      .ms-options-wrap > button:focus, .ms-options-wrap > button {
          border: 1px solid #d9d9d9;
          border-top-color: #c0c0c0;
          color: #3333ff;
          font-size: 12px;
          height: 22px;
          padding: 3px 11px;
      }
      .ms-options-wrap.ms-has-selections > button {
          color: #3333ff;
      }
      .ms-options-wrap > button:after {
          border-top-color: #3333ff;
          border-left-width: 3px;
          border-right-width: 3px;
      }
      .ms-options-wrap > .ms-options > .ms-selectall.global {
          margin: 4px 11px;
      }
      .ms-options-wrap > .ms-options .ms-selectall {
          color: #3333ff;
          font-size: 12px;
          text-transform: none;
      }
      .ms-options-wrap > .ms-options > ul input[type="checkbox"] {
          border-color: #c0c0c0;
      }
      .ms-options-wrap > .ms-options > ul label {
          padding: 6px 4px 2px 22px;
          margin: 0;
      }
  </style>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.js"></script>
​
    <script type="text/javascript">
​
        $(function () {
​
var result = {
    "titles": [
        "Year",
        "All",
        "Google Opps",
        "Google Bids",
        "Google Sales"
    ],
    "data": [
        [
            "2020",
            342,
            102,
            61,
            8
        ],
        [
            "2021",
            488,
            155,
            66,
            23
        ],
        [
            "2022",
            174,
            51,
            28,
            8
        ],
        [
            "2023",
            186,
            55,
            30,
            8
        ]
    ]
​
}
      
            dataTable: null,
​
                        console.log(result);
                        let $table = $(`
    <table id="marketing-report-grid-new" class="table basictable" style="width:100%; border:1px" data-paging="false">
        <thead>
            ${result.titles.map(title => `<th>${title}</th>`).join('')}
        </thead>
        <tbody>
            ${result.data.map(row => `<tr>${row.map(value => `<td>${value}</td>`).join('')}</tr>`).join('')}
        </tbody>
    </table>`
        );
                        $('div.newMarketing').html('').append($table);
                           $('#marketing-report-grid-new').DataTable({
                  autoWidth: true,
                      });
                  
                })
        
​
    </script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
         <div class="newMarketing">
     
         </div>
      </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;
}
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers