The Data Table Show Entries Dropdown Menu is not working

The Data Table Show Entries Dropdown Menu is not working

angelogianopulosangelogianopulos Posts: 2Questions: 1Answers: 0
edited March 2023 in Free community support

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,055 Site admin

    Your example HTML above doesn't appear to run: https://live.datatables.net/qodijofi/1/edit .

    Regarding the error in the select list - try removing $(".mdb-select").material_select();. It looks like the error is in the Material library you are using.

    Allan

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736
    Answer ✓

    I'm not familiar with Materialize but I suspect the problem is with these statements:

              $("select").addClass("mdb-select");
              $(".mdb-select").material_select();
    

    This is the generated HTML for the page length element:

    <div class="select-wrapper mdb-select">
        <span class="caret">▼</span>
        <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-58d38f05-a296-4a09-8045-13eb7b93ca9f" value="">
        <ul id="select-options-58d38f05-a296-4a09-8045-13eb7b93ca9f" class="dropdown-content select-dropdown w-100 ">
            <li class="active">
                <span class="filtrable">  10</span>
            </li>
            <li class=" ">
                <span class="filtrable">  25</span>
            </li>
            <li class=" ">
                <span class="filtrable">  50</span>
            </li>
            <li class=" ">
                <span class="filtrable">  100</span>
            </li>
        </ul>
        <select name="dirTable_length" aria-controls="dirTable" class="mdb-select initialized">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>
    

    My suggestion is to not add the class mdb-select to the Datatables length element.

    Kevin

  • angelogianopulosangelogianopulos Posts: 2Questions: 1Answers: 0

    Thank you by removing the mdb-select class the dropdown worled.

Sign In or Register to comment.