i wanna use datatables.net (e.g., https://www.datatables.net/manual/options) for live search etc.
but i have massive problems to include .js and .css scripts in my phpbb (although no errors occurs - see screenshot)
maybe someone can help - tnx a lot
it is not shown correctly and no sorting is possible
Code: Select all
<!DOCTYPE html>
<html dir="ltr" lang="en-gb">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title> test </title>
<link rel="alternate" type="application/atom+xml" title="Feed - " href="/feed"> <link rel="alternate" type="application/atom+xml" title="Feed - New Topics" href="/feed/topics">
<!--
phpBB style name: prosilver
Based on style: prosilver (this is the default phpBB3 style)
Original author: Tom Beddard ( http://www.subBlue.com/ )
Modified by:
-->
<link href="./assets/css/font-awesome.min.css?assets_version=35" rel="stylesheet">
<link href="./styles/prosilver/theme/stylesheet.css?assets_version=35" rel="stylesheet">
<link href="./styles/prosilver/theme/en/stylesheet.css?assets_version=35" rel="stylesheet">
<!--[if lte IE 9]>
<link href="./styles/prosilver/theme/tweaks.css?assets_version=35" rel="stylesheet">
<![endif]-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<link href="./ext/orthohin/navbar/styles/all/theme/bootstrap3.3.7.css?assets_version=35" rel="stylesheet" type="text/css" media="screen" />
<link href="./ext/orthohin/navbar/styles/all/theme/yamm.css?assets_version=35" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<style type="text/css">
body { padding-top: 70px; }
</style>
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700i" rel="stylesheet"> -->
</head>
<body id="phpbb" class="nojs notouch section-compare-version ltr ">
<style type="text/css">
.bootstrap .navbar .nav > li > a:hover,
.bootstrap .navbar .nav > li > a:focus {
background-color: rgba(0,0,0,0.10) !important;
}
</style>
<div class="bootstrap">
...
</div>
<div id="wrap" class="wrap">
<a id="top" class="top-anchor" accesskey="t"></a>
<div id="page-header">
<div class="headerbar" role="banner">
</div>
<div class="navbar" role="navigation">
<div class="inner">
<ul id="nav-main" class="nav-main linklist" role="menubar">
<li id="quick-links" class="quick-links dropdown-container responsive-menu" data-skip-responsive="true">
<a href="#" class="dropdown-trigger">
<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>Quick links</span>
</a>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents" role="menu">
<li class="separator"></li>
<li>
<a href="./search.php?search_id=egosearch" role="menuitem">
<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Your posts</span>
</a>
</li>
<li>
<a href="./search.php?search_id=newposts" role="menuitem">
<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>New posts</span>
</a>
</li>
<li>
<a href="./search.php?search_id=unreadposts" role="menuitem">
<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>Unread posts</span>
</a>
</li>
<li>
<a href="./search.php?search_id=unanswered" role="menuitem">
<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Unanswered topics</span>
</a>
</li>
<li>
<a href="./search.php?search_id=active_topics" role="menuitem">
<i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>Active topics</span>
</a>
</li>
<li class="separator"></li>
<li>
<a href="./search.php" role="menuitem">
<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>Search</span>
</a>
</li>
<li class="separator"></li>
<li>
<a href="./memberlist.php" role="menuitem">
<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>Members</span>
</a>
</li>
<li>
<a href="./memberlist.php?mode=team" role="menuitem">
<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>The team</span>
</a>
</li>
<li class="separator"></li>
</ul>
</div>
</li>
<li data-last-responsive="true">
<a href="./adm/index.php?sid=411a35cf45ca3d807b5ce2f14fa45464" title="Administration Control Panel" role="menuitem">
<i class="icon fa-cogs fa-fw" aria-hidden="true"></i><span>ACP</span>
</a>
</li>
<li id="username_logged_in" class="rightside " data-skip-responsive="true">
<div class="header-profile dropdown-container">
<a href="./ucp.php" class="header-avatar dropdown-trigger"> <span style="color: #AA0000;" class="username-coloured">Administrator</span></a>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents" role="menu">
<li>
<a href="./ucp.php" title="User Control Panel" role="menuitem">
<i class="icon fa-sliders fa-fw" aria-hidden="true"></i><span>User Control Panel</span>
</a>
</li>
<li>
<a href="./memberlist.php?mode=viewprofile&u=2" title="Profile" role="menuitem">
<i class="icon fa-user fa-fw" aria-hidden="true"></i><span>Profile</span>
</a>
</li>
<li class="separator"></li>
<li>
<a href="./ucp.php?mode=logout&sid=411a35cf45ca3d807b5ce2f14fa45464" title="Logout" accesskey="x" role="menuitem">
<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="rightside" data-skip-responsive="true">
<a href="./ucp.php?i=pm&folder=inbox" role="menuitem">
<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span>Private messages </span><strong class="badge hidden">0</strong>
</a>
</li>
<li class="dropdown-container dropdown-right rightside" data-skip-responsive="true">
<a href="./ucp.php?i=ucp_notifications" id="notification_list_button" class="dropdown-trigger">
<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>Notifications </span><strong class="badge hidden">0</strong>
</a>
<div id="notification_list" class="dropdown dropdown-extended notification_list">
<div class="pointer"><div class="pointer-inner"></div></div>
<div class="dropdown-contents">
<div class="header">
Notifications
<span class="header_settings">
<a href="./ucp.php?i=ucp_notifications&mode=notification_options">Settings</a>
</span>
</div>
<ul>
<li class="no_notifications">
You have no notifications
</li>
</ul>
<div class="footer">
<a href="./ucp.php?i=ucp_notifications"><span>See All</span></a>
</div>
</div>
</div>
</li>
</ul>
<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
<li class="breadcrumbs">
<span class="crumb" itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><a href="./index.php" itemprop="url" accesskey="h" data-navbar-reference="index"><i class="icon fa-home fa-fw"></i><span itemprop="title">Board index</span></a></span>
</li>
<li class="rightside responsive-search">
<a href="./search.php" title="View the advanced search options" role="menuitem">
<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Search</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<a id="start_here" class="anchor"></a>
<div id="page-body" class="page-body" role="main">
<div class="post bg1">
<div class="inner">
<div class="postbody" style="width: 100%">
<div class="content">
<div>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-footer" class="page-footer" role="contentinfo">
<div class="navbar" role="navigation">
<div class="inner">
<ul id="nav-footer" class="nav-footer linklist" role="menubar">
<li class="breadcrumbs">
<span class="crumb"><a href="./index.php" data-navbar-reference="index"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span>Board index</span></a></span> </li>
<li class="rightside">All times are <span title="UTC">UTC</span></li>
<li class="rightside">
<a href="./ucp.php?mode=delete_cookies" data-ajax="true" data-refresh="true" role="menuitem">
<i class="icon fa-trash fa-fw" aria-hidden="true"></i><span>Delete all board cookies</span>
</a>
</li>
<li class="rightside" data-last-responsive="true">
<a href="./memberlist.php" title="View complete list of members" role="menuitem">
<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>Members</span>
</a>
</li>
<li class="rightside" data-last-responsive="true">
<a href="./memberlist.php?mode=team" role="menuitem">
<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>The team</span>
</a>
</li>
<li class="rightside" data-last-responsive="true">
<a href="./memberlist.php?mode=contactadmin" role="menuitem">
<i class="icon fa-envelope fa-fw" aria-hidden="true"></i><span>Contact us</span>
</a>
</li>
</ul>
</div>
</div>
<div class="copyright">
Powered by <a href="https://www.phpbb.com/">phpBB</a>® Forum Software © phpBB Limited
<br /><strong><a href="./adm/index.php?sid=411a35cf45ca3d807b5ce2f14fa45464">Administration Control Panel</a></strong> </div>
<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="AJAX error" data-ajax-error-text="Something went wrong when processing your request." data-ajax-error-text-abort="User aborted request." data-ajax-error-text-timeout="Your request timed out; please try again." data-ajax-error-text-parsererror="Something went wrong with the request and the server returned an invalid reply.">
<div id="darken" class="darken"> </div>
</div>
<div id="phpbb_alert" class="phpbb_alert" data-l-err="Error" data-l-timeout-processing-req="Request timed out.">
<a href="#" class="alert_close">
<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
</a>
<h3 class="alert_title"> </h3><p class="alert_text"></p>
</div>
<div id="phpbb_confirm" class="phpbb_alert">
<a href="#" class="alert_close">
<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
</a>
<div class="alert_text"></div>
</div>
</div>
</div>
<div>
<a id="bottom" class="anchor" accesskey="z"></a>
</div>
<script type="text/javascript" src="./assets/javascript/jquery.min.js?assets_version=35"></script>
<script type="text/javascript" src="./assets/javascript/core.js?assets_version=35"></script>
<script type="text/javascript" src="./styles/prosilver/template/forum_fn.js?assets_version=35"></script>
<script type="text/javascript" src="./styles/prosilver/template/ajax.js?assets_version=35"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
</script>
</body>
</html>