$(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>
