Integrating with Datatables

Datatables is a jQuery plugin that offers tremendous flexibility in how you view/interact with your tables. AND it integrates very well with jQuery_pivot.

Because we need to reset datatables each time we modify the table we need to create a callback function that will be fired after modification. You can accomplish this task with the following code

function setupPivot(input){
    input.callbacks = {afterUpdateResults: function(){
      $('#results > table').dataTable({
        "sDom": "<'row'<'span6'l><'span6'f>>t<'row'<'span6'i><'span6'p>>",
        "iDisplayLength": 50,
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "oLanguage": {
          "sLengthMenu": "_MENU_ records per page"
        }
      });
    }};
    $('#pivot-demo').pivot_display('setup', input);
  };

You'll note that several options are already specified in the options object passed to dataTable. Above are the options used in our Demo and work very well with jQuery_pivot.

The code above will allow you to initialize a pivot object just as you would without using data tables. Just define your fields and your CSV url then call it like so.

setupPivot({url:'./lib/csv/demo.csv', fields: fields, filters: {employer: 'Acme Corp'}, rowLabels:["city"], summaries:["billed_amount", "payment_amount"]})

And there you have it. When you alter your pivot the callback function will be fired and your table will have all the flexibility and power of datatables.

Be sure to check the Datatables website for more information formatting/display options. :)