Fix initialise() when it is called on empty data-table (#340)

camicroscope · Apr 7, 2020 · b305d14 · b305d14
1 parent 8b9bfc8
commit b305d14
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/apps/table.html b/apps/table.html
@@ -393,7 +393,7 @@ <h5 class="modal-title" id="deleteModalLabel">Delete confirmation</h5>
 				if (data.length == 0) {
 					var div = document.querySelector('.container');
 					div.textContent = `No Data Found ... x _ x`;
-					div.classList = `text-center p-4`;
+					div.classList = `container text-center p-4`;
 					return;
 				}
 
@@ -410,11 +410,38 @@ <h5 class="modal-title" id="deleteModalLabel">Delete confirmation</h5>
 				tbody = data.map((d) => {
 					return "<tr>" + d.map((a) => "<td>" + a + "</td>").reduce((a, b) => a + b) + "</tr>";
 				});
-				totaltablepages = Math.ceil(data.length/$("#entries").val());
+				let entriesPerPage;
+				if($('#entries').val()===undefined)
+					entriesPerPage=10; // default value, when initially no slide
+				else
+					entriesPerPage= $('#entries').val();
+				totaltablepages = Math.ceil(data.length/entriesPerPage);
 				selectedpage = 0;
 				$("#search-table").val("");
 				searching = false;
 
+				if( data.length>0 && $('.container').children().length===0)
+				{
+					$('.container').html(`<div>
+						<div>
+						<h3 class="text-center h3 mb-0">Available Slides</h3>
+						<div class="search-box float-left form-group form-inline">
+							<select id='entries' class="select form-control mr-2">
+								<option value="10" selected>10 slides/page</option>
+								<option value="20">20 slides/page</option>
+								<option value="40">40 slides/page</option>
+								<option value="50">50 slides/page</option>
+								<option value="100">100 slides/page</option>
+							</select>
+							<input id="search-table" type="text" class="form-control" placeholder="Search&hellip;">
+					</div>
+						</div>
+						<div class="table-responsive">
+							<table id='datatables' class="table table-striped"></table>
+						</div>
+			</div >
+`);
+				}
 				document.getElementById("datatables").innerHTML = `
 				<thead>${thead.reduce((a, b) => a + b)}</thead>
 				<tbody>${tbody.reduce((a, b) => a + b)}</tbody>