The jquery.pivot plugin can be used for presenting table data in pivot form. It is made and maintained me, Janus Schmidt, currently employed by Metalogic.dk.
The project lives on github.
For further info on how to use the plugin, have a look at the demo
I made this some time ago, for a web application that enables people to keep track of time styrpaatiden.dk. As i am a big fan of jQuery, i decided, it was time for
me to give back to the community.
This is only a scarce description, so look in the examples to get more information.
The data can be parsed from a html table with special markup or from json data. As i live in denmark i've built in the possibility to pass in format and parse functions for numbers.
You can also supply a function that will be called when the user clicks a result cell. The function is passed info on which groupby value and pivot value is clicked. This can be used
to fetch and present more details from the server.
To use the plugin you need a script reference to jquery, the plugin build/jquery.pivot.min.js and maybe the demo/stylesheet.css if you don't want to style the pivot
yourself. The fold unfold images are defined in the css.
The plugins accepts these parameters:
javascript
$.fn.pivot.defaults = {
source: null, //Must be json or a jquery element containing a table
bTotals: true, //Includes total row and column
bCollapsible: true, // Set to false to expand all and remove open/close buttons
aggregatefunc: calcsum, //defaults to sum. Set to null for no totals. Set to function that concatenates for strings.
formatFunc: function (n) { return n; }, //A function to format numeric result/total cells. Ie. for non US numeric formats
parseNumFunc: function (n) { return +n; }, //Can be used if parsing a html table and want a non standard method of parsing data.
//Ie. for non US numeric formats.
//Set to null if result column should be considered string data.
onResultCellClicked: null, //Method thats called when a result cell is clicked. This can be used to call server and present details for that cell.
//Signature = function(dataObjectWithInformationOnClikedCell, jqueryElementThatsClicked)
noGroupByText: "No value", //Text used if no data is available for specific groupby and pivot value.
noDataText: "No data" //Text used if source data is empty.
sortPivotColumnHeaders: true //if false pivot columns will appear in the order they are discovered in the source.
};
The source is in Typescript.
If you for some reason don't want to use typescript, You're welcome to send bugs/change suggestions in plain javascript.
The project is setup to use grunt.
npm install -g grunt-cli.cd to project directory and run npm installgrunt commandWhen developing edit the typescript\src\*.ts files run grunt typescript:dev in a nodejs console and check your
changes in demo\demo.htm and/or tests\run.html.
When you're done coding and think everything is in order run grunt without arguments to run everything.
Always complete this step without errors before sending a pull request.
If you wan't to send a pull request, make sure you run grunt without errors first.
Secret bonus grunt task. If you have a saucelab account you can fill in set your sauce credentials in the environment variables and run grunt sauce to
get the unittest run in different target browsers. You must have java installed and added to your nodejs environment path. Also you must have local webserver serving you web on localhost/jquery.pivot.
Don't sweat it if you skip this step. :-)
The project uses the MIT license.