update

css/statbate.css

@@ -360,6 +360,9 @@ table.dataTable {
 }
 
 @media (max-width: 805px) {
+	.dataTables_paginate,
+	.dataTables_info,
+	.dataTables_length,
 	.income_chart,
 	.content_nav,
 	.header {
@@ -383,6 +386,21 @@ table.dataTable {
 	.content_table {
 		width: 100%;
 	}
+	
+	.dataTables_filter label {
+		display: block !important;
+	}
+	
+	.form-control-sm[type=search] {
+		width: 100% !important;
+	}
+	
+	div.dataTables_wrapper div.dataTables_filter input {
+		margin-left: 0 !important;
+	}
+	.col-md-6 {
+		width: 100%;
+	}
 }
 
 @media (any-hover: hover) {

index.html

@@ -236,7 +236,6 @@
 	<script src="./js/jquery-3.7.0.min.js"></script>
 	<script src="./js/d3.min.js"></script>
 	<script src="./js/metricsgraphics.min.js"></script>
-	
 	<script src="./js/jquery.dataTables.min.js"></script>
 	<script src="./js/bootstrap.bundle.min.js"></script>
 	<script src="./js/dataTables.bootstrap5.min.js"></script>
@@ -244,15 +243,6 @@
 	<script src="./js/statbate.js"></script>
 	
 	<script>
-	$('.dropdown-menu').on( 'click', 'a', function() {
-		text = $(this).html();
-		htmlText = text + ' <span class="caret"></span>';
-		$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
-	});
-	
-	$(document).ready(function () {
-		$('#main').DataTable();
-	});
 		
 	</script>
 </html>

js/statbate.js

@@ -1,5 +1,6 @@
 var mobile = false;
 var income_chart = false;
+var tables = [];
 
 window.addEventListener("resize", function() {
 	if(window.innerWidth > 805){
@@ -11,7 +12,34 @@ window.addEventListener("resize", function() {
 		if(!income_chart){
 			showStat();
 		}
+		if(tables["main"]["status"] == "mobile"){
+			tables["main"]["status"] = "desktop";
+			tables["main"].page.len(10).draw();
 		}
+		return;
+	}
+	if(tables["main"]["status"] == "desktop"){
+		tables["main"]["status"] = "mobile";
+		tables["main"].page.len(100).draw();
+	}
+});
+
+var dataTableOptions = {
+	bAutoWidth: false,
+	oLanguage: {
+		sLengthMenu: "Show _MENU_ entries",
+		sSearch: "",
+		sSearchPlaceholder: "Search",
+	},
+	pagingType: 'simple_numbers', // or numbers
+	iDisplayLength: 10,
+	order: [[5, "desc"]],
+};
+
+$('.dropdown-menu').on( 'click', 'a', function() {
+	text = $(this).html();
+	htmlText = text + ' <span class="caret"></span>';
+	$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
 });
 
 function choose() {
@@ -131,12 +159,25 @@ function statbate() {
 	};
 }
 
-msgs = {
+function createTables(){
-	arr: [],
+	tables["main"] = $('#main').DataTable({...dataTableOptions,});
+	tables["main"]["status"] = "mobile";
+	if(window.innerWidth > 805){
+		tables["main"]["status"] = "desktop";
+	}
 }
 
+msgs = {arr: [],};
+
+
+//oTable.page.len(100).draw();
+
 statbate();
 showStat();
 
 console.log('Debug https://statbate.com/debug.php');
 console.log('Statbate is open source project (https://github.com/statbate)');
+
+$(document).ready(function () {
+	createTables();
+});