Jquery Datatable 主题不可见

Question

我有以下代码在 .net 核心应用程序中实现 Jquery 数据表。然而，引导主题是不可见的。这个视图实现了一个布局页面。我已在浏览器中检查控制台是否有任何错误，但找不到任何错误。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/css" src="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"></script>
<script type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"></script>
<script type="text/css" src="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.min.css"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"> 
</script>



    <script>
$(function () {
    $.ajax({
        type: "POST",
        url: "/ApplicationUsers/LoadData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        headers: { 'Access-Control-Allow-Origin': '*' },
        dataType: "json",
        success: function (response) {
            OnSuccess(response);
        },
        failure: function (response) {
            alert(response.d);
        },
        error: function (response) {
            alert(response.d);
        }
    });
});


   

  // INITIALIZATION OF DATATABLES
       // =======================================================
      function OnSuccess(response) {
      console.log(response);
    $.noConflict();
    $('#datatable').DataTable(
        {
            fixedHeader: true,
            paging: true,
            scrollX: false,
            lengthChange: true,
            searching: false,
            ordering: true,
            data: response.data.result,
            columns: [
                { 'data': '', "defaultContent": "", },
                { 'data': 'userID', "defaultContent": "", },
                { 'data': 'name', "defaultContent": "", },
                { 'data': 'userName', "defaultContent": "", },
                { 'data': 'emailAddress', "defaultContent": "", }]
        });
      };
     </script>

Answer 1

您的代码中有一些错误。

1. type="text/css" 应该在<link> 中，并且您引用了不正确的 dataTable css。参考以下代码。

   <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
   
   <link type="text/css" src="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"></link>
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
   <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
   

2. 删除OnSuccess方法末尾的;。