Files
2025-01-03 08:59:21 +08:00

156 lines
7.3 KiB
HTML

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv="cache-control" content="no-cache">
<title>scraping reddit.com/r/rational recs</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/3.2.0/css/buttons.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/colreorder/2.0.4/css/colReorder.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/datetime/1.5.4/css/dataTables.dateTime.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/fixedcolumns/5.0.4/css/fixedColumns.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/keytable/2.12.1/css/keyTable.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/3.0.3/css/responsive.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/rowgroup/1.5.1/css/rowGroup.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/rowreorder/1.5.0/css/rowReorder.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/scroller/2.4.3/css/scroller.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/searchbuilder/1.8.1/css/searchBuilder.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/searchpanes/2.3.3/css/searchPanes.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/select/2.1.0/css/select.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/staterestore/1.4.1/css/stateRestore.bootstrap5.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/2.0.4/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.5.4/js/dataTables.dateTime.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/5.0.4/js/dataTables.fixedColumns.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/keytable/2.12.1/js/dataTables.keyTable.min.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.3/js/responsive.bootstrap5.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.5.1/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.5.0/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.4.3/js/dataTables.scroller.min.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.8.1/js/dataTables.searchBuilder.min.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.8.1/js/searchBuilder.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.3.3/js/dataTables.searchPanes.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.3.3/js/searchPanes.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/select/2.1.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/staterestore/1.4.1/js/dataTables.stateRestore.min.js"></script>
<script src="https://cdn.datatables.net/staterestore/1.4.1/js/stateRestore.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script>
</head>
<body>
<div class="tabl">
<table id="myTable" class="table table-sm table-striped table-bordered nowrap compact hover" style="width:100%"></table>
</div>
</body>
<footer>
<h3>scraping <a href="https://old.reddit.com/r/rational/">reddit.com/r/rational/</a></h3>
<a href="https://github.com/wassname/scrape_r_rational">Source code</a> with FAQ, and column definition. <a href="https://old.reddit.com/r/rational/comments/1hoonrc/v2_table_which_stories_have_been_linked_most/">Reddit discussion</a>.</footer>
<style>
ul.dtr-details li span.dtr-data {
/* display: block;
margin: 0.25em 0; */
white-space: wrap;
/* word-wrap: break-word */
}
</style>
<script>
// Decompresses base64 encoded GZIP string. Retruns a string with original text.
const decompress = (base64string) => {
const bytes = Uint8Array.from(atob(base64string), c => c.charCodeAt(0));
const decompressedBytes = pako.inflate(bytes);
return new TextDecoder().decode(decompressedBytes);
}
let dataGz = '{{ data }}'
let data = JSON.parse(decompress(dataGz))
</script>
<script>
var table = new DataTable('#myTable', {
responsive: true,
data: data,
columns: {{ columns }},
order: [[1, '⬆️']],
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, 'All']
],
pageLength: 20,
columnDefs: [
{
targets: 1,
className: 'noVis'
}
],
search: {
// https://datatables.net/reference/type/DataTables.SearchOptions
regex: true,
caseInsensitive: true,
smart: true
},
layout: {
topStart: {
buttons: [
'colvis', 'searchBuilder', 'copy', 'excel', 'pdf','createState', 'savedStates'
],
},
},
initComplete: function () {
this.api()
.columns()
.every(function () {
let column = this;
let title = column.footer().textContent;
// Create input element
let input = document.createElement('input');
input.className = 'form-control';
input.placeholder = title;
column.footer().replaceChildren(input);
let searchOptions = {
// regex: true,
caseInsensitive: true,
smart: true
};
// Event listener for user input
input.addEventListener('keyup', () => {
if (column.search() !== this.value) {
column.search(input.value, searchOptions).draw();
}
});
});
},
});
// // Add event listeners to the two range filtering inputs
$('#min').keyup( function() { table.draw(); } );
$('#max').keyup( function() { table.draw(); } );
</script>
</html>