I am new to angular and i want to implement jquery datatable in my project.When i implement in a demo project it working perfectly but when i implement on my working project it shows an error,below is my codes
my angular.json file
here i add
"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
],
i create a module as admin under this module i create a component as manage-blogs and in tis component i bind dynamic data in table.
my index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Panel</title>
<base href="/">
<!-- 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">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<app-root></app-root>
<!-- jQuery 2.2.3 -->
<script src="assets/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.6 -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
my manage-blogs-component.ts file
import { Component,ViewChild, OnInit } from '#angular/core';
import { BlogService } from '../../services/blog.service';
import { Blog } from '../../models/blog';
declare var $;
#Component({
selector: 'app-manage-blogs',
templateUrl: './manage-blogs.component.html',
styleUrls: ['./manage-blogs.component.css']
})
export class ManageBlogsComponent implements OnInit {
title = 'Manage Blogs';
blogs: Blog;
error: string;
#ViewChild('dataTable') table;
dataTable: any;
constructor(private blogService: BlogService) { }
ngOnInit():void {
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable();
this.blogService.getBlogs().subscribe(
(data: Blog) => this.blogs = data,
error => this.error = error
);
}
}
my manage-blog-component.html file
<div class="box-body">
<table #dataTable class="table table-bordered table-striped">
<thead>
<tr>
<th>#ID</th>
<th>Image</th>
<th>Title</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let blog of blogs">
<td>{{blog.id}}</td>
<td><img src="{{blog.image}}" ></td>
<td>{{blog.title}}</td>
<td>{{blog.created_at | date: 'mediumDate'}}</td>
<td class="action">
Edit
<a href="#" class="btn btn-danger btn-
sm">Delete</a>
</td>
</tr>
</tbody>
</table>
{{error}}
</div>
when i load the page it shows an error
ERROR TypeError: this.dataTable.DataTable is not a function
But in another demo project i put avove code on app.component file it working.
If you are using Angular, Try to use angular-datatable. From my experience, this is the best.
https://www.npmjs.com/package/angular-datatables.
Related
Here is my Service ( It just gets a list of entities )
#Service
public class ProcedureService {
#Autowired
ProcedureRepository procedureRepository;
public List getProceduresList() {
List<Procedure> procedureList;
procedureList = procedureRepository.findAll();
return procedureList;
}
}
Here is my Controller. It just puts list he gets to view.
#Controller
public class ServicesController {
#Autowired
ProcedureService procedureService;
#GetMapping("/services")
public String getCustomer(Model model) {
List<Procedure> procedures = procedureService.getProceduresList();
model.addAttribute("procedures", procedures);
return "services";
}
}
And here is my real problem. Thyme leaf just doesn't see the entity in a List ( it sees the list though ). Here is my screen and full code of View
<!DOCTYPE html>
<html lang="en">
<head>
<title>SpringMVC + Thymeleaf + Bootstrap 4 Table Example</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Customer Table</h1>
<div class="row col-md-7 table-responsive">
<table id="customerTable" class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Street</th>
<th>Postcode</th>
</tr>
</thead>
<tbody>
<tr th:each="procedure: ${procedures}">
<td th:text="${procedure.}" />
<td th:text="${procedure.getId}" />
</tr>
</tr>
</tbody>
</table>
</div>
</div>
I forgot about html lang="en" xmlns:th="http://www.thymeleaf.org" in html so th wasn't really working.
I'm new to angular and I don't know why it looks odd (table not looks like proper ) while running snipet, it doesn't give me look and feel like datatable. I want to give it UI like this, i try to chnage version of css also, but it did not help. Can any one help me to solve this issue. Any help will be appreciated. Thanks in advance.
//Angularjs and jquery.datatable with ui.bootstrap and ui.utils
var app=angular.module('formvalid', ['ui.bootstrap']);
app.controller('validationCtrl',function($scope){
var table = $('#ajaxExample').DataTable({
"ajax" : {
"url": "http://datatable.getsandbox.com/datatable",
"dataSrc": "users",
"headers": "Content-Type : application/json"
},
"columns" : [
{ "data": "name" },
{ "data": "age" },
{ "data": "position" },
{ "data": "office" },
],
});
});
table tr th{
background:#337ab7;
color:white;
text-align:left;
vertical-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datatable using jquery.datatable in angularjs</title>
<link rel='stylesheet prefetch'
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch'
href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
</head>
<body>
<div class="container" ng-app="formvalid">
<div class="panel" data-ng-controller="validationCtrl">
<div class="panel-heading border">
<h2>Data table using jquery datatable in Angularjs</h2>
</div>
<div class="panel-body">
<table id="ajaxExample" class="display" width="100%" ui-jq="datatable" ui-options="ajaxOptions">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js'></script>
<script
src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>
</body>
</html>
To attach bootstrap table styling from the dataTables.bootstrap.min.css file, you need to add classes to your table element.
class="table table-striped table-bordered"
Otherwise you get the standard bootstrap table styling.
If you use the HTML tab on the page you link to, it shows you how the table on that page is styled.
I want to render a table dynamically, based on ajax requests. The Backend is set up properly and when I execute the code the data from the response package is successfully loaded into my variables.
However, when viewing it in the browser, console logs the following error:
[Vue warn]: Failed to generate render function:
SyntaxError: Unexpected token - in
with(this){return _c('div',{attrs:{"id":"app"}},[_m(0),_v(" "),_c('table',[_c('tbody',[_c('tr',_l((header),function(head-item){return _c('th',{domProps:{"textContent":_s(head-item)}})})),_v(" "),_l((data),function(entry){return _c('tr',_l((entry),function(item){return _c('td',{domProps:{"textContent":_s(item)}})}))})],2)])])}
(found in <Root>)
My app.js file:
new Vue({
el: '#app',
data: {
header: [],
data: [],
},
mounted() {
axios.get('/contacts').then(response => this.load_response(response));
},
methods: {
load_response(response) {
this.header = response.data.header;
this.data = response.data.data;
}
}
});
And my html-file:
<!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">
<title>TestProject</title>
<body>
<div id="app">
<table>
<tr>
<th>TestHeader/th>
</tr>
<tr>
<td>TestItem</td>
</tr>
</table>
<table>
<tr>
<th v-for="head-item in header" v-text="head-item"></th>
</tr>
<tr v-for="entry in data">
<td v-for="item in entry" v-text="item"></td>
</tr>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
When I try it in the browser, the first (dummy) table is shown for half a second or so, before it gets hidden. Then the page is blank.
EDIT: The json received from the server is in the form
{
header: [foo, bar, foobar...],
data:[[foo, bar, footer], [foo2, bar2, foobar2], ...]
}
You cannot use a dash in an identifier in v-for. Try
<th v-for="headItem in header" v-text="headItem"></th>
Dash isn't a valid character for any JavaScript variable.
Im inserting an widget within template like this:
<script id="example-template" type="text/x-kendo-template">
<div data-role="collapsible" data-expand="expandHandler">
<h3>#= example #</h3>
</div>
</script>
But the widget is does not initialize, just show as plain html.
Some people suggest to use kendo.mobile.init and it works, but looks like a hack. This method is not at least documented.
My question is: what can I do to properly initialize widgets inside template?
Complete example:
<!DOCTYPE html>
<html>
<head>
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- view -->
<div id="foo"
data-role="view"
data-show="onShow"
data-model="viewModel">
<div id="bar">
</div>
</div>
<!-- template -->
<script id="collapsible-template" type="text/x-kendo-template">
<div data-role="collapsible" data-expand="expandHandler">
<h3>
#= title #
</h3>
<table>
<tr>
<td>Line 1:</td>
<td>#= line1 #</td>
</tr>
<tr>
<td>Line 2:</td>
<td>#= line2 #</td>
</tr>
</table>
</div>
</script>
<script>
var app = new kendo.mobile.Application();
var data = [
{"title": "title1", "line1": "line 1", "line2": "line 21"},
{"title": "title2", "line1": "line 12", "line2": "line 22"}
];
function onShow(){
var template = kendo.template($("#collapsible-template").html());
$("#bar").html(kendo.render(template, data));
}
function expandHandler(){
console.log("expand");
}
</script>
</body>
</html>
Not sure how you do that mvvm way, go on with this initializing it on the javascript instead if it is okay
See the example :
var app = new kendo.mobile.Application();
var data = [
{"title": "title1", "line1": "line 1", "line2": "line 21"},
{"title": "title2", "line1": "line 12", "line2": "line 22"}
];
function expandHandler(){
console.log("expand");
}
function onShow(){
var template = kendo.template($("#collapsible-template").html());
$("#bar").html(kendo.render(template, data));
$(".test").kendoMobileCollapsible({
expand: expandHandler
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head>
<body>
<!-- view -->
<div id="foo"
data-role="view"
data-show="onShow"
data-model="viewModel">
<div id="bar">
</div>
</div>
<!-- template -->
<script id="collapsible-template" type="text/x-kendo-template">
<div class="test">
<h3>
#= title #
</h3>
<table>
<tr>
<td>Line 1:</td>
<td>#= line1 #</td>
</tr>
<tr>
<td>Line 2:</td>
<td>#= line2 #</td>
</tr>
</table>
</div>
</script>
</body>
</html>
I am running the Spring application with JQuery. But the application is not running. After the JQuery function is called the application is not working. For example please refer the below image, the alert('name') after the $('#name').val(); is not working.
Can any one please tell why it is not working?
I have added the JQuery file in js folder in WebContent.
And for importing the jquery i used the
<script src="/AjaxWithSpringMVC2Annotation/js/jquery.js"></script>
in JSP page.
Here's the full JSP source:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add Users using ajax</title>
<script src="/AjaxWithSpringMVC2Annotation/js/jquery.js"></script>
<script type="text/javascript">
function doAjaxPost() {
// get the form values
alert('doAjaxPost ');
var name = $('#name').val();
alert('name ');
var education = $('#education').val();
alert('education ');
$.ajax({
type : "POST",
url : "/AjaxWithSpringMVC2Annotation/AddUser.htm",
data : "name=" + name + "&education=" + education,
success : function(response) {
// we have the response
$('#info').html(response);
$('#name').val('');
$('#education').val('');
},
error : function(e) {
alert('Error: ' + e);
}
});
}
</script>
</head>
<body>
<h1>Add Users using Ajax ........</h1>
<table>
<tr>
<td>Enter your name :</td>
<td><input type="text" id="name"><br /></td>
</tr>
<tr>
<td>Education :</td>
<td><input type="text" id="education"><br /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Add Users"
onclick="doAjaxPost()"><br /></td>
</tr>
<tr>
<td colspan="2"><div id="info" style="color: green;"></div></td>
</tr>
</table>
<a href="/AjaxWithSpringMVC2Annotation/showUsers.htm">Show All
Users</a>
</body>
</html>
You might want to add a resource handler for the path js/**. See 17.15.6 Configuring Serving of Resources.
#Configuration
#EnableWebMvc
public class SpringConfiguration extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/js/**").addResourceLocations("/js/");
}
}
or in XML:
<mvc:resources mapping="/js/**" location="/js/"/>