The Data Table Show Entries Dropdown Menu is not working
The Data Table Show Entries Dropdown Menu is not working
angelogianopulos
Posts: 2Questions: 1Answers: 0
https://broward.org/Arts/PublicArt/Pages/Directory.aspx
Hello the show entries dropdown menu is not unfolding; it was working before so I updated the JS and jQuery CDNs but still no positive response.
<html
dir="ltr"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:mso="urn:schemas-microsoft-com:office:office"
xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
>
<head>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"
/>
<style type="text/css">
.dataTables_length label {
margin-right: 1rem;
padding-top: 1rem;
}
.dataTables_filter.md-form {
margin-top: 0.55rem;
}
.dataTables_filter.md-form input {
font-weight: 300;
}
.dataTables_wrapper .row {
margin-bottom: 1.5rem;
}
div.dataTables_wrapper div.dataTables_info {
padding-top: 0;
padding-bottom: 1rem;
}
.dataTables_paginate {
float: right;
}
.dataTables_filter {
float: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
outline: none !important;
border: none;
background-color: white !important;
background: none !important;
box-shadow: 0 0 0 0 !important;
}
.select-wrapper input.select-dropdown {
margin-bottom: 0px;
padding-top: 15px;
}
div.dataTables_wrapper div.dataTables_length label {
margin-bottom: 0px;
padding-top: 25px;
}
.select-dropdown {
margin-top: 27px;
}
.select-wrapper span.caret {
margin-top: 15px;
}
@media only screen and (max-width: 768px) {
#dirTable_filter {
width: 100%;
}
#dirTable_filter input {
width: 100%;
}
.dataTables_wrapper .row {
margin-bottom: 0.5rem;
}
}
/* custom table styles */
a#dirListTitle {
color: #039be5;
font-weight: 500;
}
a#dirListTitleLink::after {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Pro";
content: " \f105";
font-size: 0.8rem;
padding-left: 6px;
}
a#dirListTitleLink:hover {
text-decoration: underline;
}
tr#headerRow {
background-color: #1c2a48;
color: white;
}
a#dirListTitleLink {
color: #039be5;
font-weight: 500;
}
input.select-dropdown,
input.form-control,
tbody#rowItems > tr[role="row"] > td,
tr#headerRow[role="row"],
div#dirTable_info,
div#dirTable_paginate,
div#dirTable_length > label {
font-family: Arquette;
font-size: 1rem;
}
</style>
</head>
<body>
<section aria-label="Main Page Content" id="fullPageContent">
<div class="container">
<!--table trial-->
<table
id="dirTable"
class="table table-striped table-bordered table-responsive-md"
cellspacing="0"
width="100%"
>
<thead id="tHeader"></thead>
<tbody id="rowItems"></tbody>
</table>
</div>
</section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script
type="text/javascript"
defer
src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"
></script>
<script
type="text/javascript"
defer
src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"
></script>
<script type="text/javascript">
tHeader = $("#tHeader");
tFooter = $("#tFooter");
rowItems = $("#rowItems");
$(document).ready(function() {
var dTSearch = location.href.toLowerCase();
if (dTSearch.indexOf("?=") >= 0) {
dTSearchVar = dTSearch
.split("=")[1]
.split("+")
.join(" ");
} else {
dTSearchVar = "";
}
$.ajax({
url:
"/Arts/_api/web/lists/GetByTitle('Directory')/items?$select=*,DirectoryType/Title,Located/Title,Medium/Title,City/Title,Artist/Title&$expand=DirectoryType/ID,Located/ID,Medium/ID,City/ID,Artist/ID&$top=10000&$orderby=Title asc",
method: "GET",
headers: {
Accept: "application/json; odata=verbose"
},
success: function(data) {
var items = data.d.results;
//Header & Footer Titles
tHeader.append($('<tr id="headerRow">'));
tFooter.append($('<tr id="footerRow">'));
tHeaderRow = $("#headerRow");
tFooterRow = $("#footerRow");
tHeaderRow.append(
$(
"<th>Title</th><th>Venue</th><th>City</th><th>Artist</th><th>Medium</th>"
)
);
//Main Data
$.each(items, function(i, item) {
if (item.DirectoryType.Title == "Public Art & Design") {
$("#rowItems").append(
$("<tr>")
.append(
'<td><a id="dirListTitleLink" href="../Pages/Artwork.aspx?artwork=' +
item.Id +
'">' +
item.Title +
"</a></td>"
)
.append(
item.LocatedId
? $("<td>" + item.Located.Title + "</td>")
: "<td></td>"
)
.append(
item.City.Title
? $("<td>" + item.City.Title + "</td>")
: "<td></td>"
)
.append(
item.ArtistId
? $(
'<td><a id="dirListTitleLink" href="../Pages/Artist.aspx?artist=' +
item.ArtistId +
'">' +
item.Artist.Title +
"</td>"
)
: "<td></td>"
)
.append(
item.MediumId
? $("<td>" + item.Medium.Title + "</td>")
: "<td></td>"
)
);
}
});
}
}).then(function() {
$("#dirTable").dataTable({
search: {
search: dTSearchVar
},
columns: [null, null, null, null, null]
});
$(".dataTables_wrapper")
.find("label")
.each(function() {
$(this)
.parent()
.append($(this).children());
});
$(".dataTables_filter")
.find("input")
.each(function() {
$("#dirTable_filter input").attr("placeholder", "Search");
$("#dirTable_filter input").removeClass("form-control-sm");
});
$(".dataTables_length").addClass("d-flex flex-row");
$(".dataTables_filter").addClass("md-form");
$("select").addClass("mdb-select");
$(".mdb-select").material_select();
$(".mdb-select").removeClass(
"form-control form-control-sm custom-select custom-select-sm"
);
$(".dataTables_filter")
.find("label")
.remove();
});
});
</script>
</body>
</html>
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
Answers
Your example HTML above doesn't appear to run: https://live.datatables.net/qodijofi/1/edit .
Regarding the error in the
selectlist - try removing$(".mdb-select").material_select();. It looks like the error is in the Material library you are using.Allan
I'm not familiar with Materialize but I suspect the problem is with these statements:
This is the generated HTML for the page length element:
My suggestion is to not add the class
mdb-selectto the Datatables length element.Kevin
Thank you by removing the
mdb-selectclass the dropdown worled.