Datatables響應式無法與ajax調用

我正在使用 datatables plugin，並且響應表有問題。我已經使用響應表和ajax調用成功，但在我的新頁面不起作用，我不知道爲什麼。這是我的javascript代碼，比我的實際代碼，但仍然沒有工作簡化：Datatables響應式無法與ajax調用

$(document).ready(function() { 
    userTable = $('#usersTable').DataTable({ 
     responsive: true, 
     "ajax": "table", 
     "columns": [ 
        { "data": "username" }, 
        { "data": "enabled"}, 
        { "data": "role.role"}, 
        { "data": "clientVersion.name" }, 
        { "data": "username" }    
        ], 

    }); 
});

，這是HTML代碼：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:th="http://www.thymeleaf.org" 
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" 
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title>Administration users</title> 
<!-- Tell the browser to be responsive to screen width --> 
<meta 
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" 
    name="viewport"> 
<!-- Spring csrf --> 
<meta name="_csrf" th:content="${_csrf.token}" /> 
<!-- default header name is X-CSRF-TOKEN --> 
<meta name="_csrf_header" th:content="${_csrf.headerName}" /> 
<!-- Bootstrap Core CSS --> 
<link th:href="@{/static/assets/bootstrap/css/bootstrap.css}" 
    rel="stylesheet"> 
<!-- Font Awesome --> 
<link rel="stylesheet" 
    th:href="@{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}"> 
<!-- Ionicons --> 
<link rel="stylesheet" 
    href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 
<!-- DataTables --> 
<link rel="stylesheet" 
    th:href="@{/static/assets/plugins/datatables/dataTables.bootstrap.css}"> 
<link rel="stylesheet" 
    th:href="@{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}"> 
<!-- Theme style --> 
<link rel="stylesheet" 
    th:href="@{/static/assets/dist/css/AdminLTE.min.css}"> 
<!-- AdminLTE Skins. Choose a skin from the css/skins 
     folder instead of downloading all of them to reduce the load. --> 
<link rel="stylesheet" 
    th:href="@{/static/assets/dist/css/skins/_all-skins.min.css}"> 
<!-- Select2 --> 
<link rel="stylesheet" 
    th:href="@{/static/assets/plugins/select2/select2.min.css}"> 
<!-- Bootstrap switch --> 
<link rel="stylesheet" 
    th:href="@{/static/assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css}"> 
<!-- jQuery 2.1.4 --> 
<script th:src="@{/static/assets/plugins/jQuery/jQuery-2.1.4.min.js}" 
    type="text/javascript"></script> 
<!-- Bootstrap 3.3.5 --> 
<script th:src="@{/static/assets/bootstrap/js/bootstrap.min.js}" 
    type="text/javascript"></script> 
<!-- DataTables --> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/datatables/jquery.dataTables.min.js}"></script> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"></script> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"></script> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"></script> 
<!-- page script --> 
<!-- Slimscroll --> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/slimScroll/jquery.slimscroll.min.js}"></script> 
<!-- FastClick --> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/fastclick/fastclick.min.js}"></script> 
<!-- Bootstrap-growl --> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"></script> 
<!-- AdminLTE App --> 
<script type="text/javascript" 
    th:src="@{/static/assets/dist/js/app.min.js}"></script> 
<!-- AdminLTE for demo purposes --> 
<script type="text/javascript" 
    th:src="@{/static/assets/dist/js/demo.js}"></script> 
<!-- Select2 --> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/select2/select2.full.min.js}"></script> 
<!-- Bootstrap switch --> 
<script type="text/javascript" 
    th:src="@{/static/assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js}"></script> 
<script type="text/javascript" th:src="@{/static/assets/js/user.js}"></script> 
</head> 
<body class="hold-transition skin-blue sidebar-mini"> 
    <div class="wrapper"> 
     <!-- Header nd menu fragment --> 
     <div th:replace="../fragments/dashboard-header :: dashboard-header"></div> 
     <!-- Content Wrapper. Contains page content --> 
     <div class="content-wrapper"> 
      <!-- Content Header (Page header) --> 
      <section class="content-header"> 
       <h1>Administration</h1> 
       <ol class="breadcrumb"> 
        <li><a th:href="@{/}"><i class="fa fa-dashboard"></i> Home 
        </a></li> 
        <li class="active">User</li> 
       </ol> 
      </section> 
      <!-- Main content --> 
      <section class="content"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <div class="box"> 
          <div class="box-header"> 
           <h3 class="box-title">Users</h3> 
          </div> 
          <!-- /.box-header --> 
          <div class="box-body"> 
           <!-- -Users table --> 
           <table id="usersTable" 
            class="table table-bordered table-striped"> 
            <thead> 
             <tr> 
              <th>Username</th> 
              <th>Enable</th> 
              <th>Role</th> 
              <th>Version</th> 
              <th>Delete</th> 
             </tr> 
            </thead> 
           </table> 
           <!-- Create two equals button because when I am on desktop I show the text add fleet otherwise the + and the tooltip. 
           This is need because otherwise the text goes out the button --> 
           <button id="addUserButton" type="button" 
            class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11" 
            data-toggle="modal" data-target="#addUserModal">Add 
            user</button> 
           <button id="addlicenseButton" type="button" 
            class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11" 
            data-toggle="modal" data-target="#addUserModal"> 
            <span class="glyphicon glyphicon-plus" data-toggle="tooltip" 
             title="Add user"></span> 
           </button> 
          </div> 
         </div> 
        </div> 
        <!-- /.col --> 
       </div> 
       <!-- /.row --> 
      </section> 
      <!-- /.content --> 
     </div> 
    </div> 
</body> 
</html>

如果我在HMTL設置表的身體一切正常，但不再使用ajax。也許這是一個愚蠢的錯誤，或者我不知道，你能幫助我嗎？感謝這是問題的屏幕，如果我縮小窗口

如果我增加窗口大小

來源

2016-02-05 luca

控制檯中的任何錯誤？如果你調整列「手動」 - >'drawCallback：function（）{userTable.columns.adjust（）。responsive.recalc（）; }'..？ – davidkonrad

沒有錯誤，我試過了，它不起作用。 CMedina的解決方案已經工作。謝謝 – luca

，你能做些什麼來阻止這種行爲在數據表被設置bAutoWidth參數設置爲false。 ....試試這個

$(document).ready(function() { 
userTable = $('#usersTable').DataTable({ 
    responsive: true, 
    "ajax": "table", 
    "autoWidth": false, 
    "columns": [ 
       { "data": "username" }, 
       { "data": "enabled"}, 
       { "data": "role.role"}, 
       { "data": "clientVersion.name" }, 
       { "data": "username" }    
       ], 

    }); 
});

來源

2016-02-05 17:22:47 CMedina

我不知道爲什麼，但它的工作原理。謝謝 – luca

Datatables響應式無法與ajax調用

回答

相關問題