Datatables responsive doesn't work with ajax call - javascript

I'm using datatables plugin and I have a problem with responsive table.
I already used responsive table and ajax call with success but in my new page it doesn't work and I don't know why.
This is my javascript code, simplified compared to my actual code but 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 this is 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 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>
If I set in HMTL the body of table it works, but with ajax no longer. Maybe it is a stupid error or I don't know, can you help me? thanks
This is screen of the problem
if I reduce the window
if I increase the window size

What you can do to stop this behaviour in DataTables is set the bAutoWidth parameter to 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" }
],
});
});

Related

Trying to implement $http in AngularJS

I'm trying to implement simple http service in AngularJS by fetching data from an api in json format. its a blog post and i am trying to show it in my blog. The data is received in my console but is not displaying in my blog. Please help. It uses Bootstrap in the front end. Here is a screenshot.
http://imgur.com/a/8p24h
var a = angular.module('Blog', []);
a.controller('BlogControl', function($http) {
var b = this;
this.heading = 'My Angular Blog';
this.subheading = 'Made by Anurag';
this.baseurl = 'https://projectsapi.edwisor.com/api/blogs/';
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
this.bpost = response.data.data;
});
})
<!DOCTYPE html>
<html ng-app="Blog">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My Angular Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="BlogControl as newBlog">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>{{newBlog.heading}}</h1>
<hr class="small">
<span class="subheading">{{newBlog.subheading}}</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview" ng-repeat="bl in newBlog.bpost">
{{bl.bodyHtml}}
</div>
<hr>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
</div>
</div>
</div>
<hr>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
<!-- Important JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="angular/app.js" type="text/javascript"></script>
</body>
</html>
this is not the instance of the controller inside the callback. Try to capture it outside and then assign bpost on the captured instance:
var that = this;
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
that.bpost = response.data.data;
});
try this npm module anngularjs-requester--http

making an angular app from html to render data from http rest endpoint using $http

I am an absolute beginner with angularjs. My problem statement is to fetch the data from the database and show it as a grid. I am trying to render the data from the rest end point on clicking the anchor tag "Data Profiling". what is the best way to do it.
This is my first post in stackoverflow so please excuse any mistakes in the post.
<!DOCTYPE html>
<html lang="en" ng-app="d2vapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>D2V</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header -->
<a name="about"></a>
<div class="intro-header" ng-controller="d2vappcontroller">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Data to Value</h1>
<h3>Your one stop data explorer</h3>
<hr class="intro-divider">
<ul class="list-group">
<table align='center' width=100%>
<tr>
<td>
<span class="network-name">Data Catalogue</span></br></br>
</td>
<td>
<span class="network-name">Data Exploration</span></br></br>
</td>
</tr>
<tr>
<td>
<span class="dataprofiling">Data Profiling</span></br></br>
</td>
<td>
<span class="network-name">API Catalogue</span></br></br>
</td>
<tr>
<td>
<span class="network-name">RUNDECK</span></br></br>
</td>
<td>
<span class="">Infra Management</span></br></br>
</td>
</tr>
</table>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
Home
</li>
<li class="footer-menu-divider">⋅</li>
<li>
About
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Services
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Contact
</li>
</ul>
<p class="copyright text-muted small">Copyright © Cisco 2016. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- AngularJS javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</body>
</html>
In your controller you have to inject the $http and $scope
angular.module('d2vapp').controller('d2vappcontroller' , function($scope, $http){
$scope.getDataProfiling = function(){
$http.get('path/to/your/route')
.success(function(response){
//do something with your response
})
.error(function(error){
//handle your error
});
}
});
In your html add the click action
<span class="dataprofiling">Data Profiling</span></br></br>
NOTE: Please go through the angularjs documentation for better understanding how various components of angular work

Bootstrap Navbar Collapse Dropdown Menu

I am working on a Bootstrap Website with a dropdown box in the Navbar. When the Navbar is in collapse mode. The dropdown menu is not responding
Does anyone know why this would happen
The website can be found at http://horizonarb.co.uk/index.html
The code is as follows;
Many thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Horizon Arboriculture</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<script src="js/googleFonts.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet"></link>
<!-- Font Awesome -->
<link rel="stylesheet" href="css/fontawesome/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<small>MENU</small>
</button>
<img src="img/front/HorizonArb_Tree_Transparent.png" class="noResize">
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Crown Thinning</li>
<li>Crown Lifting</li>
<li>Crown Reduction</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="container" id="topContainer">
<div class="row">
<div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center marginTopThirty">
<img src="img/front/HorizonArb_Transparent.png" width="70%">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The dropdown is opening and closing, but it's hidden from view by the container. The following CSS should fix that:
.navbar-static-top .navbar-collapse.in {
overflow-y: visible; /* Bootstrap default is "auto" */
}

Issue: The whole page loading instead just the div with .load()

I have a layout with 3 columns in divs: cMenu, cList and cContent.
In menu, I use this:
<script>
$(document).ready( function() {
$("#mMateriasPrimas").on("click", function() {
$("#cLista").load("materias_primas_lista.php");
});
});
</script>
<div class="menu_wrapper">
<div class="menu_item">
Matérias primas
</div>
<div class="menu_hover">
</div>
<!-- other menu itens following here -->
</div>
And this is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet">
<link href="css/typo.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<?php require 'includes/connect_link.php' ; ?>
<div class="wrapper">
<div class="header">
<strong>TOP</strong>
</div><!-- .header-->
<div class="middle">
<div class="container">
<main class="content">
<strong>MAIN</strong>
</main><!-- .content -->
</div><!-- .container-->
<div class="left-sidebar" id="cMenu">
<?php require '_menu.php'; ?>
</div><!-- .left-sidebar -->
<div class="right-sidebar" id="cLista">
<?php // require 'materias_primas_lista.php'; ?>
</div><!-- .right-sidebar -->
</div><!-- .middle-->
</div><!-- .wrapper -->
<div class="footer">
<strong>Footer</strong>
</div><!-- .footer -->
</body>
</html>
When I click on my link, the cList div receives the correct file and reload the whole page.
Can someone help me, please?
The default action when you click a link is to load the href. You can prevent it by calling event.preventDefault().
$("#mMateriasPrimas").on("click", function(event) {
event.preventDefault();
$("#cLista").load("materias_primas_lista.php");
});

JQuery UI Tabs not rendering in HTML5

I'm using JQuery UI to render a tabbed layout. My markup is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-ui.js" type="text/javascript">
</script>
<script src="js/jquery-ui.min.js" type="text/javascript">
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script></head>
<body>
<img src="images/logo_big.gif" alt="Logo"/><br/>
<div id="tabs">
<ul>
<li>Introduction</li>
<li>Family</li>
<li>Wills</li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div><!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
</div><!-- Tabs2 -->
</body>
</html>
How does the above markup need to be modified so that the Jquery UI tabs are properly rendered?
It looks like you were loading jquery twice, also I think you need to move your init function below the links to jquery, like this:
<!doctype html> <html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<img src="images/logo_big.gif" alt="Logo" />
<br/>
<div id="tabs">
<ul>
<li>Introduction
</li>
<li>Family
</li>
<li>Wills
</li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div>
<!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
</div>
<!-- Tabs2 -->
</body> </html>

Categories