I was experimenting “Filter HTML Table rows using PUG” and got a PING for the same requirement! It’s easy using CDN and JS Script (I used it only for demo purpose.) For sure, I will walk you through the steps in bootstrap consumptions later in my blog post. I say “NO” for CDN because of reliability! issues.
Requirement/Outcome is illustrated in the below shown GIF
Interesting right? 🙂 PUG file is here…..
doctype html head meta(charset='utf-8') title Filter link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') // jQuery (necessary for Bootstrap's JavaScript plugins) table#table_format.table.table-bordered.table-striped.table-hover.table-list-search thead tr th # th ProcessName th Id th select#filterText(style='display:inline-block', onchange='filterText()') option(disabled='', selected='') Select option(value='true') True option(value='false') False option(value='all') All tbody#myTable each process in results tr.content td=process.ProcessName td=process.Id td=process.Handles td=process.Handles > 600 script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js') script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js') script. function filterText() { var rex = new RegExp($('#filterText').val()); if (rex == "/all/") { clearFilter() } else { $('.content').hide(); $('.content').filter(function () { return rex.test($(this).text()); }).show(); } } function clearFilter() { $('.filterText').val(''); $('.content').show(); }
Tip:Â td=process.Handles > 600 // This results in boolean!
Here I am selecting first 10 process running in local host! Yes, please bare with me I need to fuse PowerShell 🙂 So, PS snippet goes like shown below!
Get-Process | Select-Object ProcessName , Id , Handles -First 10 | ConvertTo-Json -Compress
Added a ROUTE in our server.js
app.get("/FilterTable", function (request, response) { ps.addCommand("./scripts/ProcessInformation.ps1") ps.invoke().then(output => { var ProcInfo = JSON.parse(output) response.render('FilterTableDemo', { results: ProcInfo }) }) });
Just hook it up and Enjoy PowerShell!
Disclaimer: I don’t know the person to credit for this JS / CDN!Â