SearchPanes Issue

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-2.3.2/af-2.7.0/b-3.2.3/b-colvis-3.2.3/b-html5-3.2.3/b-print-3.2.3/cr-2.1.1/cc-1.0.5/date-1.5.5/fc-5.0.4/fh-4.0.3/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.1/sr-1.4.1/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-2.3.2/af-2.7.0/b-3.2.3/b-colvis-3.2.3/b-html5-3.2.3/b-print-3.2.3/cr-2.1.1/cc-1.0.5/date-1.5.5/fc-5.0.4/fh-4.0.3/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sb-1.8.2/sp-2.3.3/sl-3.0.1/sr-1.4.1/datatables.min.js"></script>
<table id="example" class="display" width="100%"></table>

JavaScript

$(document).ready(function () {
  const data = []

  // Define 150 unique job titles
  const jobTitles = []
  for (let i = 1; i <= 150; i++) {
    jobTitles.push(`Job Title ${i}`)
  }

  // Generate 5,000 records with random job titles and distances
  for (let i = 1; i <= 5000; i++) {
    const randomTitle = jobTitles[Math.floor(Math.random() * jobTitles.length)]

    data.push({
      id: i,
      jobTitle: randomTitle
    })
  }

  $("#example").DataTable({
    data: data,
    columns: [
      { data: "id", title: "ID" },
      {
        data: "jobTitle",
        title: "Job Title",
        searchPanes: { show: true },
      },
     
    ],
    layout: {
      topStart: {
        buttons: [
          {
            extend: "searchPanes",
            text: "Filters",
            className: "button",
          },
        ],
      },
      bottomStart: ["pageLength", "info"],
    },
    pageLength: 25 
  });
});