I am using Ajax call in Spring Boot App, Not able to do Table sorting for the columns, Anyway of doing client side sorting in Ajax ?
Since you didn't include any client-side code I'll just make a few assumptions:
Solution 1: You may have additional unwanted divs in your table. The Bootstrap3 sortable table is picky when it comes to structure. Don't put any divs beneath or above the tr values. Do something like this:
<table id="example" class="table table-striped table-bordered table-hover" style="max-width: 85% !important;">
<thead>
<tr>
<th><b>Requested By</b></th>
<th><b>Request Type</b></th>
<th><b>Reason</b></th>
<th><b>Requested Date</b></th>
<th><b>Status</b></th>
</tr>
</thead>
<tbody>
<tr th:each="request : ${requests}" th:if="${request.get('requestStatus') == 'Pending'}">
<td th:text="${request.get('author').get('username')}" class="initial-name">Employee Initials</td>
<td th:text="${request.get('requestType')}">Request Type</td>
<td th:text="${request.get('requestText')}">Reason</td>
<td th:text="${request.get('dateRequested')}">Requested Date</td>
<td th:switch="${request.get('requestStatus')}">
<th:block th:case="Pending" th:text="${request.get('requestStatus')}"><span class="nnit">Pending</span></th:block>
<th:block th:case="Approved" th:text="${request.get('requestStatus')}"><span class="green">Approved</span></th:block>
<th:block th:case="Rejected" th:text="${request.get('requestStatus')}"><span class="nnit">Rejected</span></th:block>
</td>
</tr>
</tbody>
</table>
Solution 2: There's a small chance you included your scripts outside of your fragment if you're using Thymeleaf as a templating engine.
Template:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.thymeleaf.org ">
<head lang="en">
<title>Sample Springboot Application</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<!-- Internal Stylesheet -->
<link href="../static/css/style.css" th:href="#{/css/style.css}" rel="stylesheet" media="screen"/>
<!--Font Awesome-->
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"/>
</head>
<body>
<div class="container" style="width: 100% !important;">
<div th:replace="fragments/header :: header"></div>
<div th:replace="fragments/table:: table"></div>
<div th:replace="fragments/footer :: footer"></div>
</div>
</body>
</html>
Fragment (Correct):
<div th:fragment="table" xmlns:th="http://www.w3.org/1999/xhtml">
<!-- Get table code from this link and paste here: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
<!-- Include all scripts before closing fragment div -->
</div>
Fragment (Incorrect):
<div th:fragment="table" xmlns:th="http://www.w3.org/1999/xhtml">
<!-- Get table code from this link and paste here: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns -->
<!-- Whoops! You included your scripts (below) after your fragment's closing div! -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
Related
I have a table "karyawans" which contains 104 data and i want to display it all in a datatable. i have done all manual from datatable and here is the result
![datatable result][1]
here is my data
![my data][2]
here is the view
#extends('layout.main')
#section('container')
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3><small>Daftar karyawan yang telah ditambahkan</small></h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Karyawan <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a>
</div>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<table id="datatable" class="table table-striped table-bordered"
style="width:100%">
<thead>
<tr>
<th>NIK</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Unit</th>
<th>Jabatan</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach ($karyawans as $karyawan)
<tr>
<td>{{ $karyawan->nik }}</td>
<td>{{ $karyawan->nama }}</td>
<td>{{ $karyawan->username }}</td>
<td>{{ $karyawan->email }}</td>
<td>{{ $karyawan->unit }}</td>
<td>{{ $karyawan->jabatan }}</td>
<td>
<div class="row d-flex justify-content-center">
Ubah
Hapus
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
and here is where I store the css and js
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ asset('images/rs.png') }}" type="image/png" />
<title>Sistem Manajemen Pekerjaan </title>
<!-- Bootstrap -->
<link href="{{ asset('../vendors/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css"
rel="stylesheet">
<!-- Font Awesome -->
<link href="{{ asset('../vendors/font-awesome/css/font-awesome.min.css') }}" type="text/css"
rel="stylesheet">
<!-- NProgress -->
<link href="{{ asset('../vendors/nprogress/nprogress.css') }}" type="text/css" rel="stylesheet">
<!-- iCheck -->
<link href="{{ asset('../vendors/iCheck/skins/flat/green.css') }}" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link
href="{{ asset('../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css') }}"
type="text/css" rel="stylesheet">
<!-- JQVMap -->
<link href="{{ asset('../vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.css') }}"
type="text/css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{{ asset('../build/css/custom.min.css') }}" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="{{ asset('//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css') }}">
{{-- <link rel="stylesheet" type="text/css"
href="{{ asset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.css') }}"> --}}
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
#include('partial.nav_bar')
<!-- top navigation -->
#include('partial.top_nav')
<!-- /top navigation -->
<!-- page content -->
<div class="container">
#yield('container')
</div>
<!-- /page content -->
<!-- footer content -->
#include('partial.footer')
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script type="text/javascript" src="{{ asset('../vendors/jquery/dist/jquery.min.js') }}">
</script>
<!-- Bootstrap -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<!-- FastClick -->
<script type="text/javascript" src="{{ asset('../vendors/fastclick/lib/fastclick.js') }}">
</script>
<!-- NProgress -->
<script type="text/javascript" src="{{ asset('../vendors/nprogress/nprogress.js') }}"></script>
<!-- Chart.js -->
<script type="text/javascript" src="{{ asset('../vendors/Chart.js/dist/Chart.min.js') }}">
</script>
<!-- gauge.js -->
<script type="text/javascript" src="{{ asset('../vendors/gauge.js/dist/gauge.min.js') }}">
</script>
<!-- bootstrap-progressbar -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js') }}"></script>
<!-- iCheck -->
<script type="text/javascript" src="{{ asset('../vendors/iCheck/icheck.min.js') }}"></script>
<!-- Skycons -->
<script type="text/javascript" src="{{ asset('../vendors/skycons/skycons.js') }}"></script>
<!-- Flot -->
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.pie.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.time.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.stack.js') }}">
</script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.resize.js') }}">
</script>
<!-- Flot plugins -->
<script type="text/javascript"
src="{{ asset('../vendors/flot.orderbars/js/jquery.flot.orderBars.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/flot-spline/js/jquery.flot.spline.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/flot.curvedlines/curvedLines.js') }}">
</script>
<!-- DateJS -->
<script type="text/javascript" src="{{ asset('../vendors/DateJS/build/date.js') }}"></script>
<!-- JQVMap -->
<script type="text/javascript" src="{{ asset('../vendors/jqvmap/dist/jquery.vmap.js') }}">
</script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/dist/maps/jquery.vmap.world.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js') }}"></script>
<!-- bootstrap-daterangepicker -->
<script type="text/javascript" src="{{ asset('../vendors/moment/min/moment.min.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<!-- Custom Theme Scripts -->
<script type="text/javascript" src="{{ asset('../build/js/custom.min.js') }}"></script>
<!-- dataTables -->
<script type="text/javascript"
src="{{ asset('//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js') }}">
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
{{-- <script type="text/javascript"
src="{{ assset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.js') }}">
</script> --}}
</body>
</html>
here is the KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->paginate(10)->withQueryString()
]);
}
FYI, I try to use the manual paginaton and searching before i know the 'datatables'
and this is the route
Route::get('/daftar_karyawan', [KaryawanController::class, 'daftar_karyawan']);
``
Sorry if there is an mistake in writing my question, because I am new to this forum and this is my first question, thank you
[1]: https://i.stack.imgur.com/GGQID.png
[2]: https://i.stack.imgur.com/R2X22.png
Remove Paginate(10) and replace with get() in KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->get()
]);
}
You can't use Paginate() for the datatable because it will limit to 10 :)
Just use get() and datatable will auto paginate !
ps:
If retrieving more than 1000 rows then there is a high chances system will load slow. Recommended to use AJAX to prevent this issue :)
my table does not show table border and hyperlink, I am using thymeleaf and spring boot. I see the data from database when i type localhost:8080 without border, I should also see a Addbutton link in that page, but it is not shown.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Employee Management System</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<div class ="container my-2">
<h1>Employees List</h1>
<a th:href="#{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-3"> Add Employee </a>
<table border="1" class="table table-striped table-responsive-md">
Can you try this
<div class='table-responsive'>
<table class="table table-striped border-1">
//your table data
</table>
</div>
I will try to keep it simple in database I have 2 fields, name = name of site and html = html code of that site.
Database looks like this:
UPDATE `websites` SET `name` = 'name', `html` = ' <title>Template 1</title> <link href="http://localhost/templates/css.css" rel="stylesheet" type="text/css"> <div class="logo"> <img class="images" id="image" src="#" alt="Your Logo"> </div> <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative; left: 209px; top: 139px;"><p>Change Text inside this box</p></div> <div id="editTxt" class="refresh" contenteditable="true"> <p>This text can be by the user.</p> </div> ' WHERE `websites`.`id` = 1;
Now when I type into browser localhost/website/{name} I would like to append html code from that database into a browser using ajax.
I have started something like this:
Controller:
function websites($name)
{
$websites = Website::all();
return view('layouts/website', ['websites' => $websites]);
$name = $websites->name;
}
Route:
Route::get('website/{name}', 'BuilderController#websites');
website.blade.php:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<div class="container template_class ">
#foreach ($websites as $website)
<a class="content-link" href="{{ asset($website->name )}}">
<img src="{{ asset($website->html )}}"/>
</a> #endforeach
</div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection #show
Can anyone help me get started?
You're wanting to Displaying Unescaped Data:
By default, Blade {{ }} statements are automatically sent through
PHP's htmlentities function to prevent XSS attacks. If you do not want
your data to be escaped, you may use the following syntax:
{!! $website->html !!}
Ran into a bit of a problem with combining Laravel and Vue.js to populate a table.
Essentially, I was trying to use the v-repeat property in combination with a http:get request using the vue-resources extension. The problem is that no values appear to be getting passed through by Vue - I simply get the {{first_name}} and {{email_address}} in brackets.
I can confirm that the API method that is called by the http:get request is in fact spitting out data (manually accessing the URL in the browser reveals data).
Here is the code in the routes.php file that is responsible for outputting the data:
get('api/v1_users',function()
{
return App\User::all()->toJson();
});
And here is what it spits out in the browser:
[{"email_address":"test123#gmail.com,"first_name":"John","password":"test123"}]
The Chrome console displays no errors nor warnings.
Here is my blade 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}">
<!-- Custom styles for this template -->
{!! Html::style('css/navbar.css') !!}
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">User Password Operations</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="inactive">Reset New User</li>
<li class="inactive">Pending Users</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Pending 1.0 Users</h1>
<p>A list of 1.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div id = "user">
<tr v-repeat = "user: v1_user">
<td>
#{{ first_name }}
</td>
<td>
#{{ email_address }}
</td>
<td>
<button type="button" class="btn btn-success">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
<div class="jumbotron">
<h1>Pending 2.0 Users</h1>
<p>A list of 2.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div>
<tr v-repeat = "user: v1_user">
<td>
#{{user.first_name}}
</td>
<td>
#{{user.email_address}}
</td>
<td>
<button type="button" class="btn btn-success" v-on= "click: onClick">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Vue.js file REP -->
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.min.js"></script>
<!-- Main Vue file-->
<script src="/js/main.js"></script>
</body>
</html>
Here is the accompanying javascript file with the Vue.js code: (main.js)
new Vue({
el: "#user",
data:
{
v1_user:[],
},
ready : function()
{
this.fetchV1IntermediaryUsers();
},
methods:
{
fetchV1IntermediaryUsers: function() {
this.$http.get('/api/v1_users',function(v1users) {
this.$set('v1_user',v1users);
});
}
}
});
You have multiple DIV's with the same ID's. ID's in HTML must be unique. When you start a VUE instance you bind it to an element, in this case which is in your code twice. Remove the ID's and add an ID to the <Body> tag, then check your code.
Hi I'm just playing around a bit with polymer and got a problem.
First here is the Page I'm editing: http://beta.sgbvm.de/app/site/berichte.php
The most things works pretty well (e.g. transitions etc) but when i scroll down the list and then click on a card the site stays at the bottom, but i want it to scroll up.
By now i searched the for nearly 5 hours but i cant figure out how to scroll back to the top after i click on a card.
I read something about accessing the shadowDom but i didnt unterstand what they where talking.
<html>
<head>
<title>SG Bergedorf/VM - mobile Seite</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
<link rel="import" href="../components/core-icon/core-icon.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="../components/paper-fab/paper-fab.html">
<link rel="import" href="../components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../components/paper-ripple/paper-ripple.html">
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../components/core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
</head>
<body style="background-color:#F0F0F0;" unresolved touch-action="auto">
<core-drawer-panel>
<core-header-panel drawer style="background-color:#fff;">
<core-toolbar style="background-color:#3a3a3a;"><div class="bottom titleDrawer">SG B/VM</div></core-toolbar>
<core-menu class="drawer">
<div class="headline"><b>Wähle:</b></div>
<core-item icon="mail" label="Nachrichten" onClick="self.location.href='index.php'"></core-item>
<core-item icon="content-paste" label="Spielberichte" onClick="self.location.href='berichte.php'"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel id="mainContainer" mode="waterfall-tall" main>
<core-toolbar class="tall animate">
<core-icon-button icon="menu" class="buttonDrawer" onclick="document.querySelector('core-drawer-panel').togglePanel();"></core-icon-button>
<div flex></div>
<div class="bottom indent title">Berichte</div>
</core-toolbar>
<core-animated-pages class="content" style="background-color:#F0F0F0;" transitions="hero-transition cross-fade slide-up">
<section id="page1" style="background-color:#F0F0F0;" cross-fade horizontal layout wrap>
/** Left out a bit here **/
</section>
<section id="page2" style="background-color:#F0F0F0;">
<div id="ergebnisBig" style="width:100%" cross-fade>
<table cellpadding='0' border='0' cellspacing='0' style='width:100%; background-color:#3a3a3a;' id="placeholderTable" hero>
<tr style="width:100%;">
<td style="width:40px;">
<paper-fab icon="arrow-back" role="button" class="mini" onclick='changeBack();' slide-up></paper-fab>
</td>
<td class='ergebnisBig' id='placeholderErgebnis'>
</td>
<td style="width:40px;">
<a name="top" id="top"> </a>
</td>
</tr>
<tr>
<td id="placeholderHalbzeit" class='halbzeitBig' colspan="3"></td>
</tr>
<tr>
<td id="placeholderTeams" class='teamsBig' colspan="3"></td>
</tr>
</table>
</div>
<div style="width:100%;" horizontal center-justified layout>
<div id="placeholderText" class="card" style="width:93%;padding:10px;" slide-up>
</div>
</div>
</section>
</core-animated-pages>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
core-header-panel provides a scroller property which gives you access to the internal scrolling div. From there, you can use vanilla JS to scroll it (using scrollTop).
document.querySelector('#mainContainer').scroller.scrollTop = 0;