set a default value on jquery datatable filter column and do an initial filtering on page load

Question

I'm trying to do an initial filtering on my datatable, where the process is to filter and show data which the login user was created. Using Jquery datatable I have initialized it like below:

$('#datatable').dataTable( {
  "oSearch": {"sSearch": $('#mytext').val() }
} );

so I tried to implement it to my code :

<!-- JS files -->
<script type="text/javascript" src="static/js/datatable.min.js"></script>

<!-- Add the following if you want to use the jQuery wrapper (you still need datatable.min.js): -->
<script type="text/javascript" src="static/js/datatable.jquery.min.js"></script>
<script>
  var tableFirst = $('#filetbl').datatable({
    pageSize: 1000,
    sort: [true, true, true, true, true, true, true, true, true, true, true, true, true],
    filters: [false, false, 'input', 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select', false],
    filterText: '検索',
  });

  $(document).ready(function() {
    $("select[data-filter='10']").val(loginuser);
    $('#filetbl').dataTable( {
      "oSearch": {"sSearch": loginuser }
    } );
  });
</script>

and here is my HTML code:

<table id="filetbl" class="table table-hover table-sm">
          <thead style="background-color: #666666;color:#FFF;font-weight: bold; ">
            <tr>
              <td>-</td>
              <td>実験ID</td>
              <td>実験名</td>
              <td>機種</td>
              <td>号機</td>
              <td>フェーズ</td>
              <td>紙種</td>
              <td>温度</td>
              <td>湿度</td>
              <td>登録日</td>
              <td>担当</td>
              <td>バージョン</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

but on my document ready event, this error always occurred

Uncaught TypeError: $(...).dataTable is not a function

do anybody knows what's the cause of the error? I think it usually would means I haven't include the JS extension on my code, but as you can see I've already done it. Could anyone knows what went wrong or please share any tutorial.

Answer 1

I think the datatable initialization have mistake

it should be :

$('#myTable').DataTable();