We Keep Coding

JS: the use of edatagrid

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?

DataTables unable to show properly in Django and HTML

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>

Django view component didn't align?

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.

Optimize loading of 5400+ records

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.

Including block content between templates

I have a big problem with including blocks between templates. The code is following:
{# layout.html.twig #} (simplified version)
<html>
<head>
.....
.....
{% block stylesheets%}{% endblock %}
{% block javascripts %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
{# index.html.twig #}
{% extends "demoBundle::layout.html.twig" %}
{% block content %}
some content {# <---- this is working #}
{% render(controller('demoBundle:Default:renderIndexContent')) %}
{% endblock %}
{# DefaultController.php #}
...
...
return $this->render('demoBundle:Gallery:slideshow.html.twig');
...
...
{# slideshow.html.twig #}
{% block stylesheet %} {# <---- this is not working #}
<link rel="stylesheets" href="{{ asset('bundles/cms/css/pictureSlider.css') }}"/>
{% endblock %}
The idea is, index.html.twig extends layout, and rendering another template with name slideshow.html.twig trought controller. But I need include stylesheets inner block in the template slideshow.html.twig to stylesheets block in head position in the main template layout.html.twig, but does not work. When i add tag {{ parent() }} to the block stylesheet in the template slideshow.html.twig, symfony say
Calling "parent" on a template that does not extend nor "use" another template is forbidden in demoBundle:Gallery:slideshow.html.twig at line 3
/EDITED*/
No, it is not resolution for me, because i have some variables returnet from defaultcontroller.php in template index.html.twig.
Ok, the previous code was just a simpliefed example. I enclose a concrete example
index.html.twig
{% extends "cmsBundle::layout.html.twig" %}
{% block rightSideBar %}{% endblock %}
{% block content %}
<div class="top_block">
<div id="module-1" class="no-title">
{% for block in blocksCenter %}
{% if (block.position=="center-top") %}
{% render(controller('cmsBundle:Default:renderIndexBlocks',{'blockname':block.name})) %}
{% endif %}
{% endfor %}
</div>
...
block.name is for example "slideshow". In the DefaultController.php inner method renderIndexBlocksAction is this piece of code:
DefaultController.php
return $this->render(
'cmsBundle:Blocks:'.$blockname.'.html.twig'
,array('items'=>$items)
);
this render template name slideshow.html.twig, there is this piece of code:
slideshow.html.twig
{% block styles %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/cms/css/pictureSlider.css') }}" type="text/css" media="all"/>
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('bundles/cms/js/jquery-1.11.0.min.js') }}"></script>
{% endblock %}
for completenes, her is the piece of layout.html.twig
layout.html.twig
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="{{ asset('bundles/cms/images/favicon.ico') }}" type="image/x-icon" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="{{ asset('bundles/cms/css/style.css') }}" type="text/css" media="all"/>
<link rel="stylesheet" href="{{ asset('bundles/cms/css/menu.css') }}" type="text/css" media="all"/>
{% block styles %}{% endblock %}
{% block javascripts %}{% endblock %}
</head>
<body>
<div id="bg_image"><img src="{{ asset('bundles/cms/images/AbstractBlue.jpg') }}" alt="" style="width:100%; height:100%;"></div>
<div id="mainContainer">
<div id="header">
<div id="top1">
<div id="logo">
<div id="search">
{% include 'cmsBundle:Default:search.html.twig' %}
</div>
<div class="wrapper" style="width:987px"/>
<div id="menu" class="menu">
{% render(controller('cmsBundle:Default:renderMenu')) %}
</div>
</div>
</div>
</div>
</div>
<div id="blocks" class="blocks">{% block rightSideBar %}{% endblock %}</div>
<!--CONTENT-->
<div id="mainContentm">
{% block content %}{% endblock %}
</div><!-- end #content -->
<!-- #footer -->
<div id="footer">
<div id="footer-left">
</div>
<div id="footer-right">
</div>
</div><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>

The error itself says calling parent on a template that does not extend nor use means your template slideshow.html.twig is not extending any parent template or layout to follow thus if there is not parent template you cannot call the stylesheets of member that does not exist,for answer to your question in slideshow.html.twig use
{% extends '::index.html.twig' %}
and then define
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheets" href="{{ asset('bundles/cms/css/pictureSlider.css') }}"/>
{% endblock %}
If there are any stylesheets in index.html.twig these will be included in your template,as viewing the index.html.twig code there is empty stylesheets block.If layout.html.twig has also defined a block for stylesheets then you should call {{ parent() }} function in the stylesheets block of index.html.twig so it will include the stylesheets of its parent layout i.e layout.html.twig