diff --git a/DataTables.Buttons.Resoures.txt b/DataTables.Buttons.Resoures.txt new file mode 100755 index 0000000..e8706ee --- /dev/null +++ b/DataTables.Buttons.Resoures.txt @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/css/custom.css b/css/custom.css index cf6f618..6d55adb 100755 --- a/css/custom.css +++ b/css/custom.css @@ -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; +} \ No newline at end of file diff --git a/index.html b/index.html index 44742a9..8334e75 100755 --- a/index.html +++ b/index.html @@ -7,16 +7,24 @@ + + + + - + + + - + + + @@ -24,18 +32,25 @@ - + + + - + - - +
+ + + +
+ +
\ No newline at end of file diff --git a/js/custom-utilities.js b/js/custom-utilities.js index 4277e54..a1cd5e0 100755 --- a/js/custom-utilities.js +++ b/js/custom-utilities.js @@ -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(); + }) + } + } + }); + +} \ No newline at end of file