I can't run DataTable in VSCode-CodePudding

I'm having some errors using a table using DataTable in Visual Studio Code.

The errors have been commented out in the code for clarity on each line where they result.

I state that I have not installed any extensions in VSCode. Is this possibly necessary to use DataTable and Bootstrap?

On codepen or on JSFiddle the code works correctly.

$(document).ready(function() {
  $("#example").DataTable();
});

.dataTables_length,
.dataTables_wrapper {
    font-size: 1.6rem;

    select,
    input {
        background-color: #f9f9f9; /*semi-colon expected*/
        border: 1px solid #999; /*{ expected*/
        border-radius: 4px; /* { expected*/
        height: 3rem; /*{ expected*/
        line-height: 2; /*{ expected*/
        font-size: 1.8rem;/*{ expected*/
        color: #333;
    }

    .dataTables_length,
    .dataTables_filter {
        margin-top: 30px;
        margin-right: 20px;
        margin-bottom: 10px;
        display: inline-flex;
    }
}

<div >
  <div >
    
    <table id="example"  cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
        
      </tbody>
    </table>

  </div>
</div>

CodePudding user response：

This has nothing to do with DataTables. You are trying to use sass in your CSS page and vscode doesn't recognize sass by default. To solve this

You can either install a sass compiler extension in vscode to compile your sass code to regular CSS or you can convert the sass code to regular CSS. Try this

$(document).ready(function() {
  $("#example").DataTable();
});

<!-- Add this to the head -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>

<div >
  <div >
    <table id="example"  cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>