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.
Related
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.
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>
In controller i have function public ActionResult Index(int id,int test= 0,int to=10){} I try to change value test from view on click to get test+=10 but i dont know how. I tryed with action link and ajax but its not working. Any ideas?
My view code :
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Countries</title>
<link href="~/Content/style.css" rel="stylesheet" />
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<table>
<tr>
<td><h3>Matches</h3></td>
</tr>
<tr>
</tr>
#foreach (var i in Model.ListMatch)
{
<tr>
<td>#Html.ActionLink(i.Description, "", new { id = i.Id })</td>
</tr>
}
</table>
</div>
</body>
</html>
I return results to ng-view. Can i do something like
This question isn't explained very well, but from what I gather you want to be able to make a change to a value without reloading the page or leaving that view.
In order to do this you have to use AJAX. I know you said you tried AJAX but perhaps you got something wrong. Try this:
$('#yourbutton').click(function() {
$.post( "/YourController/YourFunction", function() {
alert( "success" );
});
});
I've got this problem when i try to get data from clients table in the database
DataTables warning: table id=example - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4
This is my Controller in Codeigniter
class Clients extends CI_Controller {
function header()
{
$data['hms'] = $this->config->item('page_title');
$this->load->view('header3',$data);
}
public function index()
{
//$this->datatables->select('*');
//$this->datatables->from('bookitguests');
//$data['clients'] = $this->datatables->generate();
$data = "";
$this->header();
$this->load->view('all_guests',$data);
}
public function TableClients()
{
$this->datatables->select('name, surname, email')->from('bookitguests');
echo $this->datatables->generate();
}
}
This is my view in Codeigniter (ps, im not adding the header file, its too long)
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function() {
$('#example').DataTable( {
"bProcessing": false,
"bServerSide": false,
"sAjaxSource": "<?php base_url(); ?>clients/TableClients",
"sServerMethod": "POST"
} );
} );
</script>
<div id="container">
<h1>All Clients</h1>
<div id="body">
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
</html>
You need to specify the columns explicitly when using an array of objects instead of a two dimensional array.
"columns": [
{ "data": "id" },
{ "data": "name" }
]
You can find more info here