Skip to content

Integrating with jQuery

rondale-sc edited this page Apr 11, 2012 · 1 revision

You don't have to know all of the internals to get something running quickly. We have packaged a jQuery plugin that will create a pivot-table for you right out of the box

Set the following in your HTML

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <!-- Set src to location of pivot.js and jquery_pivot.js relative to this file! -->
  <script type="text/javascript" src=".location/to/pivot.js"></script>
  <!-- Must be loaded after pivot.js & jQuery -->
  <script type="text/javascript" src="./location/to/jquery_pivot.js"></script>
</head>>
<div id="pivot-table">
</div>
<div id="results">
</div>

<script type="text/javascript">
  $(document).ready(function() {
    var data = "" // Your CSV or JSON data as a string

    // default fields are labelable, non-sumarrizable, non-filterable
    // so be sure define the fields you expect to be able to filter by
    var fields = []

    $('#pivot-demo').pivot_display('process', {csv: data, fields: fields})
  });
</script>

This will create the filters in a drop down list, and checkboxes for labels/summaries. Optionally you can disable the creation of the containing element. If you do this then <div id='filter-list'></div>, <div id="label-fields"></div>, and <div id='summary-fields'></div> must be defined. This offers a much more configurable setup (results div must exist).