Skip to content

Commit

Permalink
Complete searchable responsive table view
Browse files Browse the repository at this point in the history
  • Loading branch information
Justin Campbel committed Jun 22, 2020
1 parent 2ef8eb7 commit 57e0dff
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 6 deletions.
12 changes: 12 additions & 0 deletions DataTables.Buttons.Resoures.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!-- DataTable Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css">

<!-- DataTables Buttons Plugin -->
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
26 changes: 26 additions & 0 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,27 @@
/* custom.css */

/* DataTables Sorting Levels */
td[class^="sorting_"]{
font-weight: bold;
}

/* Reduce spacing white space in header row */
.itemTable thead tr th{
border-width: 0px;
}

.itemTable thead tr td{
padding-top: 0px;
border-top-width: 0px;
}

/* Add drop shadow to floating header
The fixedHeader-floating class is applied to a new table
that becomes the table header when scrolling by the
DataTables FixedHeader plugin.
*/
.fixedHeader-floating{
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
27 changes: 21 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,50 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



<!-- CSS -->

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap-4.5.min.css">

<!-- DataTables (jQuery Plugin) -->
<!-- DataTables CSS -->
<link rel="stylesheet" href="css/jquery.dataTables-1.10.21.bootstrap4.css">
<!-- DataTable FixedHeader CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.min.css">

<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">




<!-- JavaScript -->

<!-- Bootstrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper-1.16.0.min.js"></script>
<script src="js/bootstrap-4.5.min.js"></script>

<!-- DataTables (jQuery Plugin) -->
<!-- DataTables jQuery Plugin -->
<script src="js/jquery.dataTables-1.10.21.js"></script>
<script src="js/jquery.dataTables-1.10.21.bootstrap4.js"></script>
<!-- DataTable FixedHeader Plugin -->
<script src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>

<!-- Custom JavaScript -->
<!-- Custom JavaScript Utilities -->
<script src="js/custom-utilities.js"></script>

</head>



<body>
<!-- Content -->
<div class="container-fluid">

<table id="itemTable" class="table table-striped itemTable">
<script>generateItemTable($("#itemTable")[0], dummyItems);</script>
</table> <!-- End #itemTable -->

</div> <!-- End .container -->
</body>
</html>
132 changes: 132 additions & 0 deletions js/custom-utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,135 @@
* A collection of utilities used throughout webqueue2
*/

/**
* Hard coded item details for demo
*/
let dummyItems = [
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "tech", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 22, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "sundeep", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "harley", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Get it out of here" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "tech", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 22, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "sundeep", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "harley", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Get it out of here" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "tech", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 22, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "sundeep", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "harley", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Get it out of here" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "tech", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 22, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "sundeep", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "harley", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Get it out of here" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "tech", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 22, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "sundeep", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "harley", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Get it out of here" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "tech", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 22, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "sundeep", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "harley", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Get it out of here" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "tech", number: 42, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 22, from: "twetzle11", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "sundeep", for: "campb303", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "harley", subject: "Beepboop", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Wait for Reply" },
{ queue: "me", number: 42, from: "twetzle11", for: "campb303", subject: "shashashAH", status: "Get it out of here" }
];

/**
* Builds a table of item details
* @param {HTMLTableElement} table The table to populate
* @param {Array<>} items Array of items
*/
// Table creation and population derrived from https://www.valentinog.com/blog/html-table/
function generateItemTable(table, items){
// jQuery selector stirng
tableSelector = "#" + table.id;

// Create thead and add row
let tableHead = table.createTHead();
let tableHeadRow = tableHead.insertRow();

// Define headers from keys of items
let headers = Object.keys(items[0]);

// Generate table headers
headers.forEach(key => {
let th = document.createElement("th");
let headerText = key.charAt(0).toUpperCase() + key.slice(1);
let headerTextNode = document.createTextNode(headerText);
th.appendChild(headerTextNode);
tableHeadRow.appendChild(th);
});

// Generate search fields
let searchRow = tableHead.insertRow();
searchRow.setAttribute("id", "searchRow");
headers.forEach(key => {
let cell = searchRow.insertCell();

let searchInput = document.createElement("input");
let searchInputId = key + "SearchField";
searchInput.setAttribute("id", searchInputId);
searchInput.setAttribute("type", "text");
searchInput.classList.add("form-control");

cell.appendChild(searchInput);
searchRow.appendChild(cell);
});

// Create DataTable
// See options at: https://datatables.net/reference/option/

// Create column names array
let columns = [];
for (key in headers){
let column = {"data": headers[key]};
columns.push(column);
}

// Create DOM format string (only displays table and processing undicator)
let domString = "<'row'<'col-sm-12'tr>>";

// Call data table constructor
let dataTable = $(tableSelector).DataTable({
autoWidth: false,
info: false,
paging: false,
data: items,
columns: columns,
dom: domString,
orderCellsTop: true,
fixedHeader: true,

// Make search fields searchable
initComplete: function(){
for (let index = 0; index <= headers.length; index++){
$('#' + headers[index] + 'SearchField').on('keyup', function(){
dataTable.columns(index).search(this.value).draw();
})
}
}
});

}

0 comments on commit 57e0dff

Please sign in to comment.