jQuery DataTables搜索窗格呈现

$(document).ready(function() {
  const dataSet = [{
      "Forums": "Horror|Thriller",
      "Replies": 44,
      "LastTopic": "McKesson Contract Packaging",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 63,
      "LastTopic": "General Injectables & Vaccines, Inc",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Adventure|Drama",
      "Replies": 31,
      "LastTopic": "REMEDYREPACK INC.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Crime",
      "Replies": 10,
      "LastTopic": "Target Corporation",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Romance",
      "Replies": 12,
      "LastTopic": "Mission Hills S.A. de C.V.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Animation|Drama|Romance",
      "Replies": 34,
      "LastTopic": "Deseret Biologicals, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 9,
      "LastTopic": "Aurobindo Pharma Limited",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Thriller",
      "Replies": 29,
      "LastTopic": "MEDOX CORPORATION",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Thriller",
      "Replies": 71,
      "LastTopic": "H.J. Harkins Company, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 6,
      "LastTopic": "Save-A-Lot Food Stores Ltd",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Drama|Romance",
      "Replies": 79,
      "LastTopic": "Roerig",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Comedy|Crime|Drama|Thriller",
      "Replies": 20,
      "LastTopic": "Wal-Mart Stores Inc",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Adventure|Drama|Romance",
      "Replies": 24,
      "LastTopic": "BioActive Nutritional, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Drama",
      "Replies": 79,
      "LastTopic": "AuroMedics Pharma LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 78,
      "LastTopic": "Dispensing Solutions, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Drama",
      "Replies": 60,
      "LastTopic": "Merck Sharp & Dohme Corp.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Thriller",
      "Replies": 56,
      "LastTopic": "Conopco Inc. d/b/a Unilever",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "(no genres listed)",
      "Replies": 29,
      "LastTopic": "Ranbaxy Pharmaceuticals Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 46,
      "LastTopic": "Northstar Rx LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Crime|Thriller",
      "Replies": 77,
      "LastTopic": "General Injectables & Vaccines, Inc",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 19,
      "LastTopic": "Actavis Pharma, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Crime|Drama|Thriller",
      "Replies": 44,
      "LastTopic": "Physicians Total Care, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Horror|Thriller",
      "Replies": 58,
      "LastTopic": "CBI Laboratories, Inc",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Adventure",
      "Replies": 13,
      "LastTopic": "Uriel Pharmacy Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Thriller",
      "Replies": 14,
      "LastTopic": "CHANEL PARFUMS BEAUTE",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Crime|Thriller",
      "Replies": 21,
      "LastTopic": "Western Family Foods Inc",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Horror",
      "Replies": 7,
      "LastTopic": "Ingenus Pharmaceuticals, LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Romance",
      "Replies": 40,
      "LastTopic": "Cardinal Health",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Musical",
      "Replies": 50,
      "LastTopic": "Rebel Distributors Corp",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Horror|Sci-Fi",
      "Replies": 66,
      "LastTopic": "Carver Korea Co.,Ltd",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Documentary",
      "Replies": 41,
      "LastTopic": "Nelco Laboratories, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Horror",
      "Replies": 14,
      "LastTopic": "Altura Pharmaceuticals, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Western",
      "Replies": 9,
      "LastTopic": "Parke-Davis Div of Pfizer Inc",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 74,
      "LastTopic": "SHISEIDO AMERICAS CORPORATION",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "(no genres listed)",
      "Replies": 80,
      "LastTopic": "Centura Home Oxygen",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Adventure|Comedy|Drama|War",
      "Replies": 76,
      "LastTopic": "Dasan E&T Co., Ltd.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Adventure|Animation|Fantasy|Romance",
      "Replies": 18,
      "LastTopic": "Procter & Gamble Manufacturing Company",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 40,
      "LastTopic": "Aidance Skincare & Topical Solutions, LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Sci-Fi",
      "Replies": 28,
      "LastTopic": "STAT RX USA LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Romance",
      "Replies": 7,
      "LastTopic": "Cardinal Health",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Crime|Drama|Thriller",
      "Replies": 31,
      "LastTopic": "GlaxoSmithKline LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy",
      "Replies": 36,
      "LastTopic": "Boehringer Ingelheim Pharmaceuticals, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Adventure|Sci-Fi",
      "Replies": 67,
      "LastTopic": "Novartis Pharmaceuticals Corporation",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 8,
      "LastTopic": "NCS HealthCare of KY, Inc dba Vangard Labs",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Crime|Drama|Film-Noir",
      "Replies": 10,
      "LastTopic": "Qualitest Pharmaceuticals",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Adventure|Comedy|Crime|Thriller",
      "Replies": 55,
      "LastTopic": "NCS HealthCare of KY, Inc dba Vangard Labs",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Documentary",
      "Replies": 72,
      "LastTopic": "Hospira Worldwide, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 55,
      "LastTopic": "H E B",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Fantasy|Horror",
      "Replies": 5,
      "LastTopic": "Guthy-Renker LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Musical|Romance",
      "Replies": 56,
      "LastTopic": "Cardinal Health",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Sci-Fi",
      "Replies": 52,
      "LastTopic": "BioActive Nutritional, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Horror",
      "Replies": 64,
      "LastTopic": "Mylan Institutional LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Crime|Thriller",
      "Replies": 46,
      "LastTopic": "Jubilant HollisterStier LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Comedy",
      "Replies": 37,
      "LastTopic": "True Nature Group, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Documentary",
      "Replies": 77,
      "LastTopic": "Roxane Laboratories, Inc",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Crime|Drama|Thriller",
      "Replies": 42,
      "LastTopic": "Physicians Total Care, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|War",
      "Replies": 7,
      "LastTopic": "AMWAY CORP.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Sci-Fi",
      "Replies": 25,
      "LastTopic": "Uriel Pharmacy Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Crime",
      "Replies": 21,
      "LastTopic": "Neutrogena Corporation",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 65,
      "LastTopic": "CareFusion 213 LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Crime|Drama",
      "Replies": 54,
      "LastTopic": "Praelia Pharmaceuticals Inc",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 51,
      "LastTopic": "Eon Labs, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama|Romance",
      "Replies": 63,
      "LastTopic": "Washington Homeopathic Products",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Crime",
      "Replies": 37,
      "LastTopic": "Cubist Pharmaceuticals U.S.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Adventure",
      "Replies": 10,
      "LastTopic": "SPIRIT PHARMACEUTICALS,LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy",
      "Replies": 41,
      "LastTopic": "Safeway",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Horror",
      "Replies": 46,
      "LastTopic": "BCM Ltd",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy",
      "Replies": 40,
      "LastTopic": "NeoPharm Co., Ltd",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Documentary",
      "Replies": 58,
      "LastTopic": "Hospira, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Musical",
      "Replies": 21,
      "LastTopic": "Procter & Gamble Manufacturing Company",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 23,
      "LastTopic": "Delta Brands Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Drama|Romance",
      "Replies": 25,
      "LastTopic": "Actiogen Corp",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Drama",
      "Replies": 79,
      "LastTopic": "AuroMedics Pharma LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Thriller",
      "Replies": 24,
      "LastTopic": "CareStream Health, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Documentary",
      "Replies": 77,
      "LastTopic": "Aidarex Pharmaceuticals LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Animation|Fantasy|Thriller",
      "Replies": 58,
      "LastTopic": "Apotheca Company",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 40,
      "LastTopic": "PharmaDerm, A division of Nycomed US Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 80,
      "LastTopic": "Rodan & Fields",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 76,
      "LastTopic": "Kadmon Pharmaceuticals, LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy",
      "Replies": 73,
      "LastTopic": "L'Oreal USA Florence Manufacturing",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Thriller",
      "Replies": 28,
      "LastTopic": "Uriel Pharmacy Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Western",
      "Replies": 43,
      "LastTopic": "Melaleuca Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Romance",
      "Replies": 23,
      "LastTopic": "Uriel Pharmacy Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Crime",
      "Replies": 27,
      "LastTopic": "Vitality Works, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Crime|Drama|Thriller",
      "Replies": 41,
      "LastTopic": "American Regent, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy",
      "Replies": 64,
      "LastTopic": "Uriel Pharmacy Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Crime|Drama",
      "Replies": 68,
      "LastTopic": "Neutrogena Corporation",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Romance",
      "Replies": 24,
      "LastTopic": "MSD Consumer care, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Drama|Fantasy",
      "Replies": 76,
      "LastTopic": "Tri-Coastal Design Company Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Crime|Film-Noir|Thriller",
      "Replies": 10,
      "LastTopic": "Strides Arcolab Limited",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Drama|Fantasy",
      "Replies": 70,
      "LastTopic": "STAT RX USA LLC",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Sci-Fi|IMAX",
      "Replies": 46,
      "LastTopic": "Rebel Distributors Corp",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 60,
      "LastTopic": "AbbVie Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Animation|Comedy|Sci-Fi|Western",
      "Replies": 76,
      "LastTopic": "Dental Technologies, Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Drama",
      "Replies": 22,
      "LastTopic": "Mylan Pharmaceuticals Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Crime",
      "Replies": 64,
      "LastTopic": "Bryant Ranch Prepack",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Action|Crime",
      "Replies": 37,
      "LastTopic": "Changzhou Jianze Sanitary Material Co., Ltd.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy",
      "Replies": 44,
      "LastTopic": "Cadila Healthcare Limited",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Comedy|Drama",
      "Replies": 75,
      "LastTopic": "Mylan Institutional Inc.",
      "Link": "http://example.com/topics/88"
    },
    {
      "Forums": "Documentary",
      "Replies": 54,
      "LastTopic": "Lupin Pharmaceuticals, Inc"
    }
  ];
  var table = $("#example").DataTable({
    searchPanes: {
      layout: "columns-1"
    },
    dom: '<"dtsp-dataTable"frti>',
    pageLength: 20,
    columns: [{
        "data": "Forums",
        "render": function(data, type, row, meta) {
          if (type === 'filter') {
            return data; // Show original text in searchPane
          } else {
            return '<a href="' + row.Link + '">' + data + '</a>'; // Render link in displayed table
          }
        }
      },
      {
        "data": "Replies"
      },
      {
        "data": "LastTopic"
      }
    ],
    columnDefs: [{
        searchPanes: {
          show: true
        },
        targets: [0]
      },
      {
        searchPanes: {
          show: false
        },
        targets: [1]
      },
      {
        searchPanes: {
          show: false
        },
        visible: false,
        targets: [2]
      }
    ],
    data: dataSet,
    deferRender: true,
    scrollCollapse: true,
    scroller: true,
    scrollY: 300
  });
  table.searchPanes();
  table.searchPanes.resizePanes();
  $("div.dtsp-verticalPanes").append(table.searchPanes.container());
});

div.dtsp-verticalContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes,
div.dtsp-verticalContainer div.container {
  width: 30%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 0;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 26%;
}

div.dtsp-verticalPanes {
  margin-right: 20px;
}

div.dtsp-title {
  margin-right: 0px !important;
  margin-top: 13px !important;
}

input.dtsp-search {
  min-width: 0px !important;
  padding-left: 0px !important;
  margin: 0px !important;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes {
  flex-direction: column;
  flex-basis: 0px;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes div.dtsp-searchPane {
  flex-basis: 0px;
}

div.dtsp-verticalContainer div.container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 60%;
}

div.dtsp-panesContainer {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/searchpanes/2.2.0/css/searchPanes.bootstrap5.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/select/1.7.0/css/select.bootstrap5.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/scroller/2.2.0/css/scroller.bootstrap5.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.2.0/js/dataTables.searchPanes.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.2.0/js/searchPanes.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.2.0/js/dataTables.scroller.min.js"></script>

<div class="dtsp-verticalContainer">
  <div class="dtsp-verticalPanes"></div>
  <div class="container">
    <table id="example" class="table table-striped nowrap" style="width:100%">
      <thead>
        <tr>
          <th>Forum</th>
          <th>Replies</th>
          <th>Last Topic</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
        <tr>
          <th>Forum</th>
          <th>Replies</th>
          <th>Last Topic</th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>