Mirrors/ArchiveBox
2
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox synced 2024-11-27 06:30:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #118 from 5hay/search-frontend-js

Browse source 
Make table filterable, sortable and provide pagination
This commit is contained in:
Nick Sweeting 2018-12-01 23:44:19 +01:00 committed by GitHub
commit baf0805412
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 { header h1 small a {
text-decoration: none; text-decoration: none;
color: orange; color: orange;
opacity: 0.6 opacity: 0.6;
font-weight: 300; font-weight: 300;
} }
header h1 small a:hover { header h1 small a:hover {
opacity: 1; opacity: 1;
} }
header + div {
margin-top: 10px;
}
.header-center { .header-center {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -56,6 +59,9 @@
padding: 20px; padding: 20px;
margin-right: -70px; margin-right: -70px;
} }
#table-bookmarks_length, #table-bookmarks_filter {
padding: 0px 15px;
}
table { table {
padding: 6px; padding: 6px;
width: 100%; width: 100%;
@ -67,7 +73,7 @@
height: 35px; height: 35px;
} }
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: #ffebeb; background-color: #ffebeb !important;
} }
table tr td { table tr td {
white-space: nowrap; white-space: nowrap;
@ -90,7 +96,13 @@
vertical-align: middle; vertical-align: middle;
margin-left: 4px; margin-left: 4px;
} }
#table-bookmarks {
width: 100%;
overflow-y: scroll;
table-layout: fixed;
}
</style> </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" />
</head> </head>
<body> <body>
<header> <header>
@ -113,7 +125,7 @@
</h1> </h1>
</div> </div>
</header> </header>
<table style="width:100%;height: 90%; overflow-y: scroll;table-layout: fixed"> <table id="table-bookmarks">
<thead> <thead>
<tr> <tr>
<th style="width: 80px;">Bookmarked</th> <th style="width: 80px;">Bookmarked</th>
@ -141,5 +153,15 @@
</center> </center>
<br/> <br/>
</footer> </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> </body>
</html> </html>