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"]],
        "sPaginationType": "bootstrap",
        "oLanguage": {
          "sLengthMenu": "_MENU_ records per page"
        }
      });
    }};
    $('#pivot-demo').pivot_display('setup', input);
  };

You'll not 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.