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.
Related
public function editsal($id)
{
$sal=Salary::find(decrypt($id));
return view('editsal',compact('sal'));
}
public function updatesal()
{
$uid=request('u_id');
$emp=Salary::find($uid);
return $emp;
$emp->update([
'date'=>request('da'),
'salary'=>request('sa'),
]);
return redirect()->route('viewsaladmin');
}
Route::get('/editsal/{id}','HomeController#editsal')->name('editsal');
Route::post('/updatesal','HomeController#updatesal')->name('updatesal');
<!DOCTYPE html>
<html>
<head>
<title>Edit Salary</title>
<link rel="stylesheet" href="styleform.css">
</head>
<body>
<h3>Salary sheet</h3>
<div align="center">
<form action="{{route('updatesal')}}" method="POST">
#csrf
<input type="hidden" name="u_id" value="{{$sal->salary_id}}">
<label>Enter date</label>
<input type="date" name="da" placeholder="date" value="{{$sal->date}}" required ><br>
<label>Enter salary</label>
<input type="number" name="sa" placeholder="amount here"value="{{$sal->salary}}" required><br>
<input type="submit" value="submit">
</form>
</div>
</body>
</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.0">
<title>View Employee Salary</title>
<link rel="stylesheet" href="styletable.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<div>
<table class="table table-striped">
<tr>
<th>salary_id</th>
<th>emp_id</th>
<th>date</th>
<th>salary amount</th>
<th>Action</th>
</tr>
#foreach($sal as $sals)
<tr>
<td>{{$sals->salary_id}}</td>
<td>{{$sals->emp_id}}</td>
<td>{{$sals->date}}</td>
<td>{{$sals->salary}}</td>
<td><a href="{{route('editsal',encrypt($sals->id))}}" class="btn btn-primary"
role="button">Edit</a></td>
<td><a href="{{route('deletesal',encrypt($sals->salary_id))}}" class="btn btn-danger"
role="button">Delete</td>
</tr>
#endforeach
</table>
</div>
</body>
</html>
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 %}
Hey guys im using bootstrap and i wanted to have text in one div but where i write more than the width of the div the text goes out instead of appear or the next line ... here is my html:
<!Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>AGORA</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="SITE.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row entete">
</div>
<div class="row">
<!-- PROFIL -->
<div class="col-md-5">
<!-- PHOTO ET PRES -->
<div class="row">
<!-- PHOTO -->
<div class="col-md-3" style="padding:0;"><img src="profil.jpg" class="img-responsive"></div>
<!-- PRESENTATION -->
<div class="col-md-9">
<p>PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
</div>
</div>
<!-- INFOS DU MEC -->
<div class="row bordure"></div>
<!-- NIVEAU TROPHEES ET CENTRE INTERET -->
<div class="row bordure"></div>
</div>
<!-- DEBATS -->
<div class="col-md-7">
<div class="row bordure"></div>
<div class="row bordure"></div>
</div>
</div>
</div>
</body>
</html>
and my css :
*{
padding:0;
}
.container-fluid{
border: 1px solid; box-sizing: border-box; height:100%;
}
.entete{
height:100px;
background-color: blue;
}
I do not understand while the text in the div doesnt stay in it ...
Thanks for help !
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header style="background-color: blue">
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<div class="container-fluid img-responsive">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4 col-xl-4" ><img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" width="200px" height="200px"></div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8" style="word-wrap: break-word ">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle now:https://jsfiddle.net/77qmh8zm/
I have tried many solutions from Stack Overflow and looked at the bootstrap documentation and have downloaded local copy of shiv.js and repond.js and included them in footer but after refreshing in IE8 its still same as before no javascript is working and even no media queries are rendering as rendered in google chrome. navbar is also no displaying.
<!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.0">
<meta name="description" content="Theme Webmonopolist">
<meta name="author" content="Faisal Naseer">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title> WebMonopolist</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/icomoon.css">
<link href="assets/css/animate-custom.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
</head>
<body>
.......
......
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/retina.js"></script>
<script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/js/smoothscroll.js"></script>
<script type="text/javascript" src="assets/js/jquery-func.js"></script>
<script type=”text/javascript” src=’https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js’></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/shiv.js"></script>
<script src="assets/js/respond.js"></script>
<![endif]-->
</body>
</html>
First of all, you should put your shiv and respond at the <head> tag, like they show here. It makes it possible detect browser's features before the whole page is loaded.
Second, here they say that serving respond.js from file:// pseudo-protocol is disabled for security purposes. Even serving it from a CDN, apparently, won't work, since here is indicated that for serving from another domain you must make some configuration.
So finally, I fixed all of it, ran the following code in localhost, not from file://, and the navbar works like a charm:
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.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 type="text/javascript" src="lib/html5shiv/dist/html5shiv.min.js"></script>
<script type="text/javascript" src="lib/respond/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<h1>Hello, from IE8!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I am new to knockout.js and I'm getting an error with a simple test page, using MVC4 and Breez.js. I want to bind data to a table.
#{Layout = null;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Breeze Test</title>
<link rel="stylesheet" href="/Content/breezesample.css" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
Breeze Test
</p>
</div>
</div>
</header>
<div id="body">
<section id="content" class="content-wrapper main-content">
<script type="text/x-jquery-tmpl" id="BookTableTemplate">
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
<th>Price</th>
<th>Read?</th>
</tr>
</thead>
<tbody data-bind="template: {name:'bookRowTemplate', foreach:books}">
</tbody>
</table>
</script>
<script type="text/x-jquery-tmpl" id="bookRowTemplate">
<tr>
<td>${Title}</td>
<td>${Author}</td>
<td>${ISBN}</td>
<td>${Price}</td>
<td>${IsRead}</td>
</tr>
</script>
<div data-bind="visible: show" style="display: none">
Save
<input type="checkbox" data-bind="checked: IncludeRead" />
include read
<div data-bind="template: 'BookTableTemplate'"></div>
</div>
<div id="logmessages"></div>
</section>
</div>
<!--3rd party library scripts -->
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/knockout-2.1.0.js"></script>
<script src="/Scripts/q.js"></script>
<script src="/Scripts/breeze.debug.js"></script>
<!-- Application scripts -->
<script src="/Scripts/app/logger.js"></script>
<script src="/Scripts/app/bookViewModel.js"></script>
</body>
</html>
Instead of getting the data output I get:
${Title} ${Author} ${ISBN} ${Price} ${IsRead}
Look at this example: http://knockoutjs.com/documentation/template-binding.html
In your template use <td data-bind="text: Title">/>