I am new comer to Django programmer. I create simple view class and put bootstrap data table.According below link ,I added button to save my data table in different format.
refer this library
now my view look like this.
but I want like this view .(Free test search align is not correct ) . I most prefer if I add button set bottom of the table. The minimum requirement create like this view.
I try many hours but still couldn’t success. expect some expert help.
------------key_list_form.html-----------------------------------------
{% extends "base.html" %}
{% block title %}Key List{% endblock %}
{% block heading %}
<h2>Serial Keys</h2>
{% endblock %}
{% block content %}
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<col width='100'>
<col width='100'>
<thead>
<tr>
<th>Product Code</th>
<th>Serial Key</th>
</tr>
</thead>
<tbody>
{% for x in key %}
<tr>
<td>{{ x.b_p_code }}</td>
<td>{{ x.key }}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Product Code</th>
<th>Serial Key</th>
</tr>
</tfoot>
</table>
{% endblock %}
-----------base.html------------------------------
{% load staticfiles %}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Key Code - {% block title %}{% endblock %}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="{% static "apple-touch-icon.png" %}">
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
<link rel="stylesheet" href="{% static "css/main.css" %}">
<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="{% static "plugins/datatables/extensions/TableTools/css/dataTables.tableTools.css" %}">
<link rel="stylesheet" href="{% static "plugins/datatables/extensions/TableTools/css/style.css" %}">
</head>
<body>
<div class="container">
<header>
{% block toggle_login %}
{% include "toggle_login.html" %}
{% endblock %}
</header>
<div>
{% block heading %}{% endblock %}
</div>
<div>
{% block content %}{% endblock %}
</div>
<hr>
</div>
<script src="{% static "js/vendor/modernizr-2.8.3-respond-1.4.2.min.js" %}"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{% static "js/vendor/jquery-1.11.2.min.js" %}"><\/script>')</script>
<script src="{% static "js/vendor/bootstrap.min.js" %}"></script>
<script src="{% static "js/main.js" %}"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js" ></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="{% static "plugins/datatables/extensions/TableTools/js/dataTables.tableTools.js" %}"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<script>
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "{% static "plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" %}"
}
});
});
</script>
</body>
</html>
please , help some expert help.
Replace
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
with
<table id="example" class="table table-bordered table-striped bootstrap-datatable" cellspacing="0" width="100%">
You missed bootstrap-datatable class.
Related
I wish to add a table dynamically using JQuery when I press a button. I want it to have borders in my table that I create. However I never get the borders showing.
I am using Django templates.
Base HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'designer/style.css' %}" />
<title>{% block title %}My amazing site{% endblock %}</title>
{% block extrahead %} {% endblock %}
</head>
<body>
<div class="container">
{% block content %} {% endblock %}
</div>
</body>
</html>
Main html that extends base.html:
{% extends 'designer/base.html' %}
{% load static %}
{% block title %}Mains Primary{% endblock %}
{% block extrahead %}
<script src="{% static 'designer/js/mains_primary_edit.js' %}"></script>
{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static 'designer/style.css' %}" />
{% block content %}
<div class="row" id="primary_tables"></div>
<button onclick="add_table()">Click me</button>
{% endblock %}
Javascript:
// Most of this is from: https://www.codemag.com/article/1601031/CRUD-in-HTML-JavaScript-and-jQuery-Using-the-Web-API
$(document).ready(function() {});
function add_table() {
let table_html = make_fixed_winding_table()
$("#primary_tables").append(table_html);
}
function make_fixed_winding_table() {
var table_html = '<div class="col-3"> \
<table className="table table-bordered table-primary"> \
<thead> \
<tr> \
<th colSpan="2"><h4>Name:<span className="badge bg-secondary">P1</span></h4></th> \
</tr> \
</thead> \
<tbody> \
<tr> \
<td>John</td> \
<td>Doe</td> \
</tr> \
<tr> \
<td>Mary</td> \
<td>Moe</td> \
</tr> \
</tbody> \
</table> \
</div>'
return table_html
}
Any ideas why I can't get a bordered table to work. Is it some interaction between jquey and bootstrap?
Thank you,
John.
I have tried just plain HTML with a fixed bootstrap table, with borders and that worked.
It just seems to be when I try and generate one.
I have problem in using edatagrid.
The red area is a select, the yellow area is *table *by edatagrid. I want to refresh the content of the table when I change the selected value of the select.
I attempted to separate the table from the whole page. When I change the selected value, send a ajax post request to get new data. But the result was the table's style was not like before, and the content of the table was not get refreshed. Like this,
Here is my code.
The whole page: test_plan.html
{% extends 'base.html' %}
{% load static %}
{% block title %} NRLabLims - 测试管理 {% endblock %}
{#控制表格的cs操作#}
{% block css %}
<link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<link href="{% static 'css/sb-admin-2.min.css'%}" rel="stylesheet">
{% endblock %}
{% block js %}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %} "></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'js/demo/datatables-demo.js' %}"></script>
{% endblock %}
<div>
{% block content %}
<div class="container-fluid">
<!-- 页头 -->
<h1 class="h3 mb-2 text-gray-800">测试管理</h1>
<a class="mb-4">测试管理包含test plan、原始记录单、时间记录、错误记录、设备说明书、sop查询、
<!-- 测试管理 -->
{% block test_head %}
<div class="card shadow mb-4">
<div class="card-header py-3">
<div class="align-content-center" >
<h3 class="m-0 font-weight-bold text-primary" >
test plan
</h3>
<select name='testplan' class='' id="testplan" onchange="changePlan()">
{% for testplan in testplans %}
<option value="{{testplan.id}}">{{testplan.testplan_no}}</option>
{% endfor%}
</select>
<button>新增test plan表</button>
</div>
</div>
{%endblock%}
{% block testplanbody %}
<div class="card-body" id="placeHolderContent">
<table id="dg" title="测试用例"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true" resizeHandle="both" style="padding: 0 4px !important;">
<thead>
<tr>
{% for item in items %}
<th field="{{item.nickname}}" width="auto" editor="{type:'validatebox'}">{{item.name}}</th>
{% endfor %}<br>
</tr>
</thead>
</table>
<div id="toolbar">
新增一行记录
删除
保存
撤销
</div>
</div>
{% endblock %}
</div>
</div>
<!-- /.container-fluid -->
{% endblock %}
</div>
{#控制表格的js操作#}
{% block js2 %}
<script>
$(function(){
$('#dg').edatagrid({
url: 'getExcelData',
saveUrl: '/lab/test/saveTestCase',
updateUrl: 'updateTestCase',
destroyUrl: 'deleteTestCase',
});
});
//切换
function changePlan(){
testplanId=$("#testplan").find("option:selected").val();
formData={'testplanId':testplanId};
$.ajax({
type:"GET",
url:"/lab/test/plan",
dataType: "html",
data:formData,
success:function(result){
console.log('result-------');
console.log(result);
$("#placeHolderContent").html(result);
},
error: function (data) {
console.log("data2"+data);
alert("changePlan failed！");
}
});
}
</script>
{% endblock %}
The table part: test_plan_content.html
<div class="card-body" id="placeHolderContent">
<table i`d="dg" title="测试用例"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true" resizeHandle="both" style="padding: 0 4px !important;">
<thead>
<tr>
{% for item in items %}
<th field="{{item.nickname}}" width="auto" editor="{type:'validatebox'}">{{item.name}}</th>
{% endfor %}<br>
</tr>
</thead>
</table>
<div id="toolbar">
新增一行记录
删除
保存
撤销
</div>
</div>
server code:
def test_plan(request):
testplanId=request.GET.get('testplanId')
testplans=Testplan.objects.all()
if(testplanId):
# return the selected one
testplan = Testplan.objects.get(id=testplanId)
testplanId = testplan.id
items = TestplanTableItems.objects.filter(Q(type=testplan.plan_type) | Q(type=0))
return render(request, 'lab_management/test_management/test_plan_content.html',
{ 'items': items})
else:
# return last one
testplan=testplans.last()
testplanId=testplan.id
items = TestplanTableItems.objects.filter(Q(type=testplan.plan_type) | Q(type=0))
return render(request, 'lab_management/test_management/test_plan.html',
{"testplans": testplans, 'items': items})
How to solve it?
I am currently trying to use DataTables to how the data held in my Django Model. However, I am unsure where I am going wrong with my HTML code as it is not showing the basic template table it is supposed to show. Currently, my table looks like this:
enter image description here
I was expecting it to look like this: enter image description here
Any form of help is appreciated. Thank you. Below are some of my code related to this problem:
results.html (the page supposed to show the table)
{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
<!------ Side nav bar ---------->
{% block content %}
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='container'>
<table id='myTable' class='display' style="width:100%">
<thead>
<tr>
<th>Website</th>
<th>Title</th>
<th>Link</th>
</tr>
</thead>
{% for result in results %}
<tr>
<td>{{ result.website }}</td>
<td>{{ result.title }}</td>
<td>{{ result.anomaly_details }}</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
{% endfor %}
</table>
</div>
{% endblock content %}
{% block script %}
<script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable({
"order": [[ 3, "asc" ]]
});
} );
</script>
{% endblock script %}
base.html (results.html inherits this template)
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
{% if title %}
<title>Django Blog - {{ title }}</title>
{% else %}
<title>Django Blog</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ml-20">
<a class="navbar-brand" href="#">OPS Web Scrape</a>
{% if user.is_authenticated %}
<a class="navbar-brand" href="{% url 'logout' %}">Logout</a>
{% endif %}
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
{% block script %}{% endblock script %}
</body>
</html>
views.py
class PostListView(ListView):
model = ResultsTable
template_name = 'app/results.html'
context_object_name = 'results'
def get_context_data(self, *args, **kwargs):
global name
context = super().get_context_data(*args, **kwargs)
context['name'] = name
return context
Try this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<div class='container'>
<table id='myTable' class='display' style="width:100%">
<thead>
<tr>
<th>Website</th>
<th>Title</th>
<th>Link</th>
<th>Action</th>
</tr>
</thead>
{% for result in results %}
<tr>
<td>{{ result.website }}</td>
<td>{{ result.title }}</td>
<td>{{ result.anomaly_details }}</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
<tr>
<td>{{ result.website }}</td>
<td>{{ result.title }}</td>
<td>{{ result.anomaly_details }}</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span></a></td>
</tr>
{% endfor %}
</table>
</div>
{% endblock content %}
{% block script %}
<script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable({
"order": [[ 3, "asc" ]]
});
} );
</script>
I am trying to display an input field based on user choice selection. Learning from stackoverflow, I have written the following code:
<form action="/register/" method="post" enctype="multipart/form-data">{% csrf_token %}
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>
<script type="text/javascript">
$('#designation').on('change',function(){
if( $(this).val()==="student"){
$("#students").show()
}
else{
$("#students").hide()
}
});
</script>
The code does work in https://jsfiddle.net/. However, when I am trying to use it in my django template its not working.(i.e., on selecting 'student' nothing appears). I have the following included as well in my base.html.
<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
UPDATE:
base.html: hideshow.js is the script.
<!DOCTYPE html>
{% load staticfiles %}
{% load static %}
<html lang="en"
xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<link href="{% static 'css/bootstrap-dist.min.css' %}" rel="stylesheet">
<link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
<script src="{% static 'JS/html5shiv.min.js' %}"></script>
<script src="{% static 'JS/respond.min.js' %}"></script>
<script src="{% static 'JS/hideshow.js' %}"></script>
<link href="{% static 'css/carousel.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/sampleLogin.css' %}" />
</head>
<body>
{% include "messages_display.html" %}
<br />
{% include "navbar.html" %}
{% block content %}
{% endblock %}
register.html:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<div class="col-md-12">
<div class="col-sm-7 col-sm-offset-2">
<h1>{{ title }}</h1><br />
<form action="/register/" method="post" enctype="multipart/form-data">{% csrf_token %}
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>
{% endblock content %}
Please help.
First you have to include jquery.min.js file in html file. Then you have to keep js code in $(document).ready(function().then your code will work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#designation').on('change',function(){
console.log($(this).val());
if( $(this).val()==="student"){
$("#students").show()
}
else{
$("#students").hide()
}
});
});
</script>
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
I am building an application with the use of Slim and Twig as it's template engine, and am currently working on a page to display all user records.
The loading takes a lot of time, 11.25 seconds in fact, and my employer finds this an unreasonable loading time, and agree it should be possible to load it quicker.
I should mention I am using Eloquent as my ORM. to communicate with my Database. and for the pagination I am using DataTables
Here is a link to Chrome dev-tool results.
The Twig Template Page:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %} | Administration</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/public/css/vendor/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/public/css/vendor/admin.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="/public/css/main.css">
<!--[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>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
{% include 'templates/partials/admin/navigation.php' %}
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
{% include 'templates/partials/admin/menubar.php' %}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{% include 'templates/partials/messages.php' %} {% block content %}{% endblock %}
</div>
</div>
</div>
{% include 'templates/partials/admin/footer.php' %}
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/public/js/vendor/jquery-1.11.2.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</html>
User View page:
{% extends 'templates/table.php' %} {% block title %}View users {% endblock %} {% block content %}
<h2> All Users </h2>
{% if users is empty%}
<p>No registered Users</p>
{% else %}
<table id="example" class="display" data-page-length='15' cellspacing="0" width="100%">
<thead>
<th> </th>
<th>Bedrijf</th>
<th>Toegang Weigeren</th>
<th>Naam:</th>
<th>VCA</th>
<th>email</th>
<th>registratie datum</th>
<th>bestanden</th>
</thead>
<tfoot>
</tfoot>
<tbody>
{% for user in users %}
<tr>
<td>
{{ user.IDSTUDENT }}
</td>
<td>
{{ user.COMPANY_NAME }}
</td>
<td>
Button here
</td>
<td>
{{ user.STUDENT_NAME }} {{ user.STUDENT_FIRSTNAME }}
</td>
<td>
{{ user.STUDENT_VCANUMMER }}
</td>
<td>
{{ user.STUDENT_EMAIL }}
</td>
<td>
{{ user.STUDENT_DATE }}
</td>
<td>
Files go here
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %} {% endblock %}
User route:
<?php
$app->get('/users', function() use($app){
$users = $app->user->where('STUDENT_LANG', 'nl')->get();
$app->render('user/all.php', [
'users' => $users
]);
})->name('user.all');
I have tried caching and compressing the files which brought it all down to the 11.25 seconds of load time, down from 16 seconds.
Advice would be most appreciated from anyone.
Try te following,
$users = table_name::paginate(n); . This will return you first n records. Identify the id of the last record. Send an ajax request on scroll with the id as the get parameter and query the database like,
$users = table_name::where('id','>',identified_id)->paginate(n);. This will get you the next n records
Thank you :)
You can use lazy loading kind of pattern so at first time it will bring only limited number of records lets say 100 rows. when user scrolls down and reach at the end of page you can query for next 100 rows and show it on your page.