How to send PowerShell output to a JQuery interactive DataTable in a Web Browser

by Doug Finke on February 15, 2011

in JavaScript,JQuery,JQuery DataTables,PowerShell,PowerShell Pearls

This post shows PowerShell code sending output to an interactive table in a Web Browser. The interactive table is achieved using JQuery and JQuery Datatables.

Out-DataTableView

The first example pipes the Get-Process command output to Out-DataTableView (aliased to odv) and the properties Name, Company and Handles are selected.

If you don’t specify any properties, Out-DataTableView will inspect and display all the properties of the piped output.

Get-Process | odv Name, Company, Handles

Below is the result. Using JavaScript, JQuery, JQuery DataTables and Style Sheets (all out out of the box) you get a sortable (click on the column headings), serachable and pageable view of the data. Ready to slice and dice.

JQuery DataTables is very customizable. It has numerous options and styled with CSS.

image

Searching the Results

Type the letter g in the search box to search all columns that contain that letter. The list subsets as you type.

image

Works with any PowerShell Output

Get-Service | odv Status, ServiceType, Name

image

Type int in the search box:

image

Challenges

Currently, Out-DataTableView code-gens an HTML page and saves it to disk. This means it has to process all the output piped to it before it can be viewed in the browser. The data is converted to an HTML Table, headers and all, plus adds the style sheets, script tags and the initial JQuery code to instantiate and load the JQuery Datatables.

Download Here

JQuery interactive DataTable download

 

  • Download and unzip the PowerShell code to a directory.
  • Change to that directory
  • Do an Import-Module .\OutDataTableView

This is a fun experiment. I am looking for ways to stream the data directly to the browser bypassing the file creation step. Suggestions are welcome.

{ 5 trackbacks }

Tweets that mention How to send PowerShell output to a JQuery interactive DataTable in a Web Browser -- Topsy.com
02.17.11 at 2:37 am
Microsoft might even announce some of its new HTML5/JavaScript tooling plans at Mix ‘11
02.22.11 at 7:08 pm
PowerShell and HTML5 Prototype
04.01.11 at 2:37 pm
Get-VolatileInfo – Quick Troubleshooting Info | rambling cookie monster
11.18.12 at 9:46 pm
PowerShell and Tables | rambling cookie monster
08.08.13 at 11:40 am

{ 13 comments… read them below or add one }

John 02.16.11 at 5:27 am

If you want to go directly to IE, then you can use the IE object model : http://msdn.microsoft.com/en-us/library/aa140078(v=office.10).aspx, the obvious downside being that the user may want to see it in their default browser (currently you get that for free). An alternative may be if you can convince a browser to accept HTML through STDIN.

I noticed one minor issue – if the data contains angle brackets or it’s not escaped. One of my tools I use internally will generate a hash for some data stream on an object, or put <<NO DATA>> if the stream was null. This is rendered as <>. (Yeah maybe aren’t good delimiters for that kind of thing but I couldn’t think of anything else and leaving it empty caused some confusion amongst some of the people using it).

It’s not the end of the world because it’s still fairly clear that there’s no data for that object, but it’d be nice if it was escaped.

John 02.16.11 at 5:29 am
David Padbury 02.16.11 at 9:58 am

I am looking for ways to stream the data directly to the browser

PowerShell dsl for a web server with comet support? Check out what’s available in Zappa, particularly the section on Bi-directional messaging.

Chris 02.16.11 at 3:30 pm

This looks very cool, but I haven’t been able to get it to work. Lots of undefined variables.

Chris 02.16.11 at 4:55 pm

BTW: I added

$r = “”
$Global:HeadingsExported = $null

to the Begin block and removed the join-path function and that cleared up my runtime issues. I’m also going to insert the text of the CSS and JS files inline so I get a single portable HTML file.

This is such a great alternative to Export-CSV.

Chris Tracy 08.09.12 at 5:34 pm

Is this on github or any other code hosting sites?

Chris Tracy 08.09.12 at 5:39 pm
RamblingCookieMonster 09.26.12 at 2:34 pm

Thanks! I was looking for something comparable to Out-Gridview in a website, and this gives way more flexibility.

Peter 11.04.12 at 8:45 pm

Hello Doug,
Nice work. I have seen alot of mention about Jquery and wanted to look into it, and you have given me the perfect excuse. All this functionally in less than half a meg.
With your Powershell to Odata post, and call Powershell from c# (can someone say ‘build a GUI front-end’?), I am starting to understand that powershell can be more than an automation scripting tool. Do you see Powershell ever reaching the level of a ‘Framework’? Like a Java or Python.

Keep the ideas coming.

Regards,
Peter

Doug Finke 11.05.12 at 9:59 am

Thanks for the comment Peter. I’m not sure if I understand exactly what you mean by ‘Framework’.

I do see PowerShell being able to do more like Python/Perl/Ruby. Those communities have decade long contributions. Plus, being able to seamlessly shift to a .NET language to extend it is tremendous.

For GUIs, check out ShowUI. Also, here is an article I got published in MSDN Magazine Secrets to Building a WPF Application in Windows PowerShell

Dane Kantner 08.09.13 at 9:20 am

The download link has “This item won’t load right now” … Is this file still available?
Thanks!

Doug Finke 08.09.13 at 8:02 pm

Thanks for the comment Dane.

I’ll take a look and post and update.

Doug Finke 08.09.13 at 9:02 pm

Hi Dane, thanks again for the comment.

I fixed the link so you can download the script.

Doug

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

You are forbidden!