Search code examples
jquerydatatable

$(...).DataTable is not a function using JQ 1.10.2

hello guys i need some help, im trying to load datatable in my website but its kinda not support, im trying change some of my jquery but its make my other function not working then i try to find jq 1.10.2 support for the datatable but its wont load and send error this is my code :

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="<?php echo base_url(); ?>asset/css/home_admin.css">
  <!--css custom-->
  <!-- <link rel="stylesheet" href="asset/css/home_admin.css"> -->
  <!--jqueryui  -> year slider -->
  <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <!-- DATATABLE CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />


</head>

<body>
  <div class="container">
    <div class="row px-3">
      <div class="col-12 card card-menu">
        <div class="card-body">
          <span style="color:white">test</span>
          <div class="col-12">
            <h2>title</h2><br>
            <table id="table_id" class="display nowrap stripe row-border order-column" style="width:100%">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">...</th>
                  <th scope="col">....</th>
                  <th scope="col">.....r</th>
                  <th scope="col">.....</th>
                  <th scope="col">......</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td scope="row">1</td>
                  <td>Row 1 Data 2</td>
                  <td>Row 1 Data 2</td>
                  <td>Row 1 Data 2</td>
                  <td>Row 1 Data 2</td>
                  <td>Row 1 Data 2</td>
                </tr>
                <tr>
                  <td scope="row">2</td>
                  <td>Row 1 Data 2</td>
                  <td>Row 1 Data 2</td>
                  <td>Row 1 Data 2</td>
                  <td>Row 1 Data 2</td>
                  <td>Row 1 Data 2</td>
                </tr>
              </tbody>
            </table>
          </div>
          <span style="color:white">test</span>
        </div>
      </div>
    </div>
  </div>

  <!--JQUERY-->
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <!-- INI SELECTOR  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <!-- bootsrap-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- DATATABEL -->
  <script src = "http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js" defer >
  <!-- <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> -->
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
  <!--js custom-->
  <script src="<?php echo base_url(); ?>asset/js/diklat.js"></script>
  <script src="<?php echo base_url(); ?>asset/js/select-dropdown.js"></script>


</body>

</html>

and the error log is

jquery.js:3827 Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (name:287)
    at mightThrow (VM21270 jquery.js:3534)
    at process (VM21270 jquery.js:3602)
Solution

  • try loading all Script files in head section. So all jquery files will get loaded before your body.