jquery mvcプロジェクトでdatatableが動作しない

Question

jquery & datatableリファレンスがページに追加されていますが、開発ツールが開かれると、Jquery.Datatableを使用してテーブルを生成しようとしています。ここでは順番に、 ので、任意の助け

<link href="~/Content/bootstrap.css" rel="stylesheet" /> 
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Content/jquery.dataTables.js"></script> 


<table id="datatableId" data-url="@Url.Action("Index","Home")" cellspacing="0" width="100%" class="table table-responsive table-bordered table-striped"> 
      <thead> 
       <tr> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Data</th> 
        <th>Actions</th> 
       </tr> 

      </thead> 
      <tbody></tbody> 
     </table> 


<script> 
    var datatable = { 
     table: null, 
     initializedDataTable: function() { 
      var $tablea = $(".table-striped"); 
      datatable.table = $tablea.DataTable({ 
       processing: true, 
       serverSide: true, 
       "alengthMenu": [[10, 20, 30, 40, 50], [10, 20, 30, 40, 50]], 
       ajax: { 
        url: $tablea.prop("data-url"), 
        type: "POST" 
       }, 
       "columns": [{ "data": "FirstName" }, 
       { "data": "LasttName" }, 
       { "data": "Gender" }], 

       "columnDefs": [ 
        { 
         "render": function (data, type, row) { 
          var inner = '<div class="btn-group">' + 
           '<button type="button" class="btn btn-secondary dropdwon-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + 
           'Actions' + 
           '</button>' + 
           '<div class="dropdown-menu">' + 
           '<a href="#" class="drop-down-item btn btn-default edit" data-id="' + row.id + '" >Edit</a>' + 
           '<a href="#" class="drop-down-item btn btn-default delete" data-id="' + row.id + '" >delete</a>' + 
           '</div>' + 
           '</div>'; 

          return inner; 
         }, 
         "targets": -1 

        } 
       ], 
       "pagingType": "full_numbers" 

      }); 
      datatable.table.on('draw', function() { 
       $('button[data-type="delete"]').click(function() { 
        var $button = $(this); 

       }); 
       $('button[data-type="Edit"').click(function() { 

       }); 
      }); 


     }, 
     getData: function() { 
      if (datatable.table == null) { 
       datatable.initializedDataTable(); 

      } else { 
       datatable.table.ajax.reload(); 
      } 
     } 

    } 

    $(document).ready(function() { 
     datatable.getData(); 
    }); 
</script> 

Answer 1

は、あなたのファイルのパスが

<script src="~/Scripts/jquery.dataTables.js"></script> 

代わりの

べきであると思われます

<script src="~/Content/jquery.dataTables.js"></script> 

はまた、あなたが使用しているのjQueryのバージョンが非常に古いですのでコードの下

<script src="https://code.jquery.com/jquery-3.2.1.js" 
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
    crossorigin="anonymous"></script> 

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" /> 

であなたのローカル参照を交換してみてください。