I'm setting up my first DataTables page and although the table displays and is formatted, most additional elements are missing (sort cols, search, next/previous...).
I have checked the docs, followed tutorials but am still stuck and all I can find is an unintelligible error in the browserś (Chrome) browser.
My HTML file (gets data from a jinja template):
<head>
<title>Test DataTable</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>{{_('Prod Code')}}</></th>
<th>{{_('Description')}}</th>
<th>{{_('Units')}}</th>
<th>{{_('Category')}}</th>
<th></th>
</tr>
</thead>
<tbody>
{% for each_product in products %}
<tr>
<td> {{ each_product.prod_code }} </a></td>
<td> {{ each_product.prod_desc }} </td>
<td> {{ each_product.prod_units }} </td>
<td> {{ each_product.prod_Category }} </td>
</tr>
{% endfor %}
</tbody>
</table>
Below is the screenshot of the page in the browser. The rows change to light grey when I hover over them.
And here is the screenshot from the error in the browser's console:
Any ideas what I'm missing?
Thanks!
Related
I'm new in web development and in Laravel 8 and I'm having trouble when using the DataTable plugin
I had read the documentation that is in this link https://datatables.net/examples/styling/bootstrap4.html
Going to show the code I have and I think I'm not doing anything wrong so dunno why it isnt working.
This is from the app.blade in the scripts
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.8.0/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ asset('css/mdDateTimePicker.css') }}">
#yield('css_extra')
</head>
As you can see I'm importing Jquery
This is the code of my view
#extends('layouts.app')
#section('content')
<div class="container my-5">
<h1>Gestión Médicos</h1>
</div>
<div class="container my-5">
<a class="btn btn-primary btn-lg text-body" href="{{route('medico.create')}}">Registrar Médico</a>
</div>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover bg-white" id="medicos">
<tr class="info">
<th>Nombre</th>
<th>Apellido</th>
<th>Cedula</th>
<th>Usuario</th>
<th>Email</th>
<th>Especialidades</th>
<th>Teléfono</th>
<th>Género</th>
<th colspan="2">Opciones</th>
</tr>
#foreach ($medicos as $key=>$medico)
<tr>
<td>{{$medico->nombre}}</td>
<td>{{$medico->apellido}}</td>
<td>{{$medico->cedula}}</td>
<td>{{$medico->Users->name}}</td>
<td>{{$medico->email}}</td>
<td>
#foreach ($medico->Persona_especialidad as $especialidad)
{{$medico->Persona_especiaidad}}
{{$especialidad->nombre}}
#endforeach
</td>
<td>{{$medico->telefono}}</td>
<td>{{$medico->genero}}</td>
<td>Editar</td>
<td>Borrar</td>
</tr>
#endforeach
</table>
</div>
</div>
#if (request()->get('mensaje'))
<script>
alert('{{request()->get('mensaje')}}')
</script>
#endif
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
<script>
$('#medicos').DataTable();
</script>
#endsection
What am I getting this console error?
I don't have a clue what is wrong.
It doesn't work because the columns doesn't match. One solution is to have both links for Editar and Borrar in only one <td>.
Code the <tr> that has the <th> like this
<tr class="info">
<th>Nombre</th>
<th>Apellido</th>
<th>Cédula</th>
<th>Usuario</th>
<th>Email</th>
<th>Especialidades</th>
<th>Teléfono</th>
<th>Género</th>
<th style="width: 20%">Opciones</th>
</tr>
And also code the <td> that has the links like this
<td>Editar
Borrar</td>
That would make the two links appear in the same <td> and solve the issue because now the <td> match in the body and in the head of the table.
There are some examples of doing this with Flask, so this should theoretically be possible with Pyramid too, but so far, haven't been able to. I'm trying to get a Pandas dataframe displayed using the DataTables JS library in the Pyramid web framework. Here's my folder/file structure:
repo_name/
modules/
get_df.py
static/
theme.css
templates/
layout.jinja2
mytemplate.jinja2
views/
__init__.py
default.py
routes.py
development.ini
production.ini
setup.py
Most of these files are untouched from the Pyramid cookiecutter code here. But the files I edites are pasted below.
views/default.py
from pyramid.view import view_config
from repo_name.modules.get_df import main
#view_config(route_name='home', renderer='../templates/mytemplate.jinja2')
def my_view(request):
df = main()
html_table = df.to_html(table_id='myTable')
return dict(project='my_project', table=html_table)
mytemplate.jinja2
{% extends "layout.jinja2" %}
{% block content %}
<div class="content">
<h1><span class="font-semi-bold">Pyramid</span> <span class="smaller">Starter project</span></h1>
<!-- <p class="lead">Welcome to <span class="font-normal">{{project}}</span>, a Pyramid application generated by<br><span class="font-normal">Cookiecutter</span>.</p> -->
<p class="lead">Welcome to <span class="font-normal">{{project}}</span>, a Pyramid application generated by<br><span class="font-normal">Cookiecutter</span>.</p>
</div>
{% endblock content %}
{% block additional_scripts %}
<!-- <script type="text/javascript" src="../static/mytemplate.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
{% endblock %}
layout.jinja2 (added CDNs for DataTables)
<!DOCTYPE html>
<html lang="{{request.locale_name}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="pyramid web application">
<meta name="author" content="Pylons Project">
<link rel="shortcut icon" href="{{request.static_url('repo_name:static/pyramid-16x16.png')}}">
<title>Cookiecutter Starter project for the Pyramid Web Framework</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom styles for this scaffold -->
<link href="{{request.static_url('repo_name:static/theme.css')}}" rel="stylesheet">
<!-- My: DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script>
<![endif]-->
</head>
<body>
<div class="starter-template">
<div class="container">
<div class="row">
<div class="col-md-2">
<img class="logo img-responsive" src="{{request.static_url('repo_name:static/pyramid.png') }}" alt="pyramid web framework">
</div>
<div class="col-md-10">
{% block content %}
<p>No content</p>
{% endblock content %}
</div>
</div>
<div class="row">
<div class="links">
<ul>
<li><i class="glyphicon glyphicon-cog icon-muted"></i>Github Project</li>
<li><i class="glyphicon glyphicon-globe icon-muted"></i>IRC Channel</li>
<li><i class="glyphicon glyphicon-home icon-muted"></i>Pylons Project</li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright">
Copyright © Pylons Project
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- My: DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
{% block additional_scripts %}{% endblock %}
</body>
</html>
The resulting webpage doesn't display the DataTable or the raw HTML table, it only displays the default HTML text with CSS formatting. Any help with this will be greatly appreciated!
You do not have any HTML <table> that would render the data in your Jinja template. The data that gets passed into that template should be a Python dict. The example below assumes that you pass in the dict users to the template.
views/default.py
#view_config(route_name='home', renderer='../templates/mytemplate.jinja2')
def my_view(request):
# insert function here that returns users as a Python dict
return dict(project='my_project', users=users)
mytemplate.jinja2
{% if users %}
<div class="table-responsive">
<table id="datatable" class="table table-striped table-bordered table-hover table-condensed" style="width:100%">
<thead>
<tr>
<th data-orderable="false">Edit</th>
<th data-orderable="false">Delete</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td><i class="glyphicon glyphicon-pencil"></i></td>
<td><i class="glyphicon glyphicon-remove"></i></td>
<td>{{ user['username'] }}</td>
<td>{{ user['role'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="alert alert-info" role="alert">No users found.</div>
{% endif %}
I am trying to incorporate dataTables to my posts index. i get the table to appear but there are no information shown in the table columns
I tried implementing the DataTables as their side says and i kept the normal way of displaying data just to be sure i get results
I use
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
For the creation of my table i use:
<table class="display" id="postsTable">
<thead>
<tr>
<td>ID</td>
<th>Title</th>
<th>Slug</th>
<th>Subtitle</th>
<th>Content</th>
</tr>
</thead>
<tbody>
#foreach($posts as $post)
<tr>
<td>{{$post->id}}</td>
<td>{{$post->Title}}</td>
<td>{{$post->Slug}}</td>
<td>{{$post->Subtitle}}</td>
<td>{{$post->Content}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
<script>
$(document).ready( function () {
$('#postsTable').DataTable();
} );
</script>
And i am sure i can get the results of my posts table since when i use:
<h1 class="title">Posts Table</h1>
<form action="/posts/create" id="myTable">
<div class="field">
<div class="control">
<button type="submit" class="button is-link">Create New Post</button>
</div>
</div>
</form>
#foreach ($posts as $post)
<li>
<a href="/posts/{{ $post->id }}">
{{$post->title}}
</a>
</li>
#endforeach
I get results.
Any help is appreciated as i couldn't find a working solution anywhere.
After reviewing my code i realized that i had a typo on the names of the attributes i was trying to get. Instead of "Title" it should have been "title" and etc
I've the below html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form name="new" method="post" action="GetR.jsp">
<div class="Main">
<table width="200" border="1">
<tr>
<td>Units</td>
<td><input type="text" name="Units" id="Units"></td>
</tr>
<tr>
<td>Product Type</td>
<td><input type="text" name="ProdT" id="ProdT"></td>
</tr>
<tr>
<td>Hours</td>
<td><input type="text" name="hours" id="hours"></td>
</tr>
<tr>
<td colspan="2"><input name="submit" type="submit" id="submit" value="Submit"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
and the below data base table
here actually when the user enters the number of units and hours and product type(product type is same as database table name) based on the input, the output should be the column names(whether it is achieved, exceeded or far exceeded) . please let me know how can i write a query for it.
for example the given row.
we entered the units as 1, and if the hours is 8(4.1hrs-8hrs), it should show No.of.Hours for Achieved, if hours is 4(2.1hrs-4hrs) it should show Exceeded and if 2(below 2 hrs) it should show Far-Exceeded.
Thanks
I'm starting developing in HTML and I'm trying to use the Kendo UI framework in ASP.NET MVC.
I started with this tutorial: Entity Framework 5.x – Database First Workflow
With this I was able to create a Web Page that show me a table with data from a database.
But now I want to style de table with Kendo UI widgets (Grid). To do that I followed this video: Using KendoUI Grids on ASP.Net MVC - Tutorial 1 (until 4:37min)
The steps that I made so far:
Download trial version of Kendo UI Complete for ASP.NET MVC
Copy kendo.default.min.css and kendo.common.min.css files from the downloaded folder to the Content folder in my Visual Studio project
Copy kendo.all.min.js file from the downloaded folder to the Scripts folder
Changed the View with the following code:
#model IEnumerable<DatabaseFirst.Models.Artesano>
#{
ViewBag.Title = "Index";
}
<link href="#Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/kendo.all.min.js")" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
$("#artesanos-grid").kendoGrid();
});
</script>
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table id="artesanos-grid">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.RFC)
</th>
<th>
#Html.DisplayNameFor(model => model.RazonSocial)
</th>
<th>
#Html.DisplayNameFor(model => model.Telefonos)
</th>
<th>
#Html.DisplayNameFor(model => model.Fax)
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.RFC)
</td>
<td>
#Html.DisplayFor(modelItem => item.RazonSocial)
</td>
<td>
#Html.DisplayFor(modelItem => item.Telefonos)
</td>
<td>
#Html.DisplayFor(modelItem => item.Fax)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.RFC }) |
#Html.ActionLink("Details", "Details", new { id=item.RFC }) |
#Html.ActionLink("Delete", "Delete", new { id=item.RFC })
</td>
</tr>
}
</tbody>
</table>
But when I run the page, no changes are made to the grid...
What am I missing?
PS:
The source code of the loaded page is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<link href="/Content/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo.default.min.css" rel="stylesheet" />
<script src="/Scripts/kendo.all.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
$("#artesanos-grid").kendoGrid();
});
</script>
<h2>Index</h2>
<p>
Create New
</p>
<table id="artesanos-grid">
<thead>
<tr>
<th>
RFC
</th>
<th>
RazonSocial
</th>
<th>
Telefonos
</th>
<th>
Fax
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
325
</td>
<td>
sdfwef
</td>
<td>
wetfgvs
</td>
<td>
sdfsdgs
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
2
</td>
<td>
weg
</td>
<td>
asdgweg
</td>
<td>
dsg
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
235423
</td>
<td>
sdga
</td>
<td>
et
</td>
<td>
wefwf
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
23
</td>
<td>
wq
</td>
<td>
sasdga
</td>
<td>
aegweg
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</tbody>
</table>
<script src="/Scripts/jquery-1.8.2.js"></script>
</body>
</html>
My problem was in the Views/Shared/_Layout.cshtml:
The file was generated like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
So I changed to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
(I put the #Scripts.Render("~/bundles/jquery") at the header)
The problem is now solved.