Mirrors/ArchiveBox
2
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox synced 2024-11-10 14:44:18 +00:00
Code Issues Projects Releases Packages Wiki Activity

fixes #61, fixes #40

Browse source 
The table has advanced features now. One can filter over all columns, sort all
columns asc/desc and paginate the table.
The state (filtered result, current page, sorting order and number of
entries shown) will be saved in localStorage so the user can open the
page in another window or tab and see the same output again.
This commit is contained in:
Shayan Ruhifard 2018-12-01 23:15:26 +01:00
parent 4cdadaae6d
commit 208501e576
1 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
archiver/templates/index.html
View file

@ -38,12 +38,15 @@
header h1 small a {
text-decoration: none;
color: orange;
opacity: 0.6
opacity: 0.6;
font-weight: 300;
}
header h1 small a:hover {
opacity: 1;
}
header + div {
margin-top: 10px;
}
.header-center {
width: 100%;
text-align: center;
@ -56,6 +59,9 @@
padding: 20px;
margin-right: -70px;
}
#table-bookmarks_length, #table-bookmarks_filter {
padding: 0px 15px;
}
table {
padding: 6px;
width: 100%;
@ -67,7 +73,7 @@
height: 35px;
}
tbody tr:nth-child(odd) {
background-color: #ffebeb;
background-color: #ffebeb !important;
}
table tr td {
white-space: nowrap;
@ -90,7 +96,13 @@
vertical-align: middle;
margin-left: 4px;
}
#table-bookmarks {
width: 100%;
overflow-y: scroll;
table-layout: fixed;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" />
</head>
<body>
<header>
@ -113,7 +125,7 @@
</h1>
</div>
</header>
<table style="width:100%;height: 90%; overflow-y: scroll;table-layout: fixed">
<table id="table-bookmarks">
<thead>
<tr>
<th style="width: 80px;">Bookmarked</th>
@ -141,5 +153,15 @@
</center>
<br/>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('#table-bookmarks').DataTable({
stateSave: true, // save state (filtered input, number of entries shown, etc) in localStorage
dom: '<lf<t>ip>' // how to show the table and its helpers (filter, etc) in the DOM
});
});
</script>
</body>
</html>