javascript - Datatables responsive doesn't work with ajax call -
i'm using datatables plugin , have problem responsive table. used responsive table , ajax call success in new page doesn't work , don't know why. javascript code, simplified compared actual code still not working:
$(document).ready(function() { usertable = $('#userstable').datatable({ responsive: true, "ajax": "table", "columns": [ { "data": "username" }, { "data": "enabled"}, { "data": "role.role"}, { "data": "clientversion.name" }, { "data": "username" } ], }); }); and html code:
<!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 browser responsive 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 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 skin css/skins folder instead of downloading of them reduce 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 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 2 equals button because when on desktop show text add fleet otherwise + , tooltip. need because otherwise text goes out 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> if set in hmtl body of table works, ajax no longer. maybe stupid error or don't know, can me? screen of problem if reduce window 
if increase window size 
what can stop behaviour in datatables set bautowidth parameter false. .... try this
$(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" } ], }); }); 
Comments
Post a Comment