Question

我正在使用 datatables plugin，我在响应表方面遇到问题。我已经成功使用了响应式表和ajax调用，但在我的新页面中它不起作用，我不知道为什么。这是我的javascript代码，与我的实际代码相比简化但仍无效：

$(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。也许这是一个愚蠢的错误，或者我不知道，你能帮助我吗？谢谢这是问题的屏幕如果我减少窗口

如果我增加窗口大小

Answer 1

如何在DataTables中停止此行为，请将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" }               
                ],

    });

});

响应数据表不适用于ajax调用

1 个答案: