dc.js - Datentabelle mit jquery Datentabelle Plugin

Question

Ich verwende dc.js, um Diagramme und Datentabelle zu erstellen.

Ich wollte einige Seitenumbruch Stile und Suchoption in der Tabelle hinzufügen.

jQuery Datentabelle Skript:

$(document).ready(function() { 
    $('#data-table').DataTable(); 
}) 

Problem ist - i die wie Suchfeld angezeigt all jquery Datentabelle Optionen zu erhalten, die Anzahl der Einträge. Aber keiner von ihnen funktioniert.

Einige bitte helfen.

Gefunden post. Aber nichts nützliches.

Answer 1

Ich mag diese DynaTable verwenden - http://www.dynatable.com/

1) Definieren Sie Ihre Tabelle html:

<table id="dc-data-table"> 
    <thead> 
     <tr> 
     <th data-dynatable-column="client_name">Client</th> 
     <th data-dynatable-column="project_name">Project</th> 
     </tr> 
    </thead> 
</table> 

2) Haken in dynatable mit Ihrer bevorzugten Optionen und der crossfilter Dimension:

  var dynatable = $('#dc-data-table').dynatable({ 
       features: { 
        pushState: false 
       }, 
       dataset: { 
        records: tableDimension.top(Infinity), 
        perPageDefault: 50, 
        perPageOptions: [50, 100, 200, 500, 1000, 2000, 5000 ,10000] 
       } 
      }).data('dynatable'); 

3) Schreiben Sie eine Methode, um die Tabelle zu aktualisieren - dc.events hilft dabei, die Häufigkeit zu begrenzen, mit der dies beim Pinselwechsel aufgerufen wird:

  function RefreshTable() { 
       dc.events.trigger(function() { 
        dynatable.settings.dataset.originalRecords = tableDimension.top(Infinity); 
        dynatable.process(); 
       }); 
      }; 

4) einhaken diese Methode in jedes Diagramme Filterereignis:

  for (var i = 0; i < dc.chartRegistry.list().length; i++) { 
       var chartI = dc.chartRegistry.list()[i]; 
       chartI.on("filtered", RefreshTable); 
      } 

5) Anruf Refresh-Tabelle einmal, um die aktuellen Daten angezeigt werden:

  RefreshTable(); 

6) machen die DC-Charts:

  dc.renderAll(); 

ist hier ein jsfiddle hierfür: http://jsfiddle.net/djmartin_umich/5jweT/2/

Beachten Sie, dass ich in dieser Geige die Gruppe und nicht die Dimension verwendet habe, um die dynatablen Daten zu füttern.

Answer 2

Da ich lieber Tables verwenden, ich DJ Martin-Lösung wie so angepasst:

Set Tisch html:

<table class="table table-condensed table-hover table-striped" id="dc-data-table"> 
    <thead> 
    <tr class="header"> 
    <th>Day</th> 
    <th>Amount</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
    <tfoot> 
    <th></th> 
    <th></th> 
    </tfoot> 
</table> 

Stellen Sie Ihre Tables Optionen:

var dataTableOptions = { 
    "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], 
    "footerCallback": function (row, data, start, end, display) { 
    var api = this.api(), data ; 

    var total = ndx.groupAll().reduceSum(function (d) { return d.amount }).value() ; 
    // Update footer 
    $(api.column(1).footer()).html(
     currencyFormat(total) 
    ) ; 
    }, 
    "order": [[1, 'desc']], 
    "dom": 'T<"clear-l"l><"clear-l"i><"clear-r"f><"clear-r"p>t', 
    "tableTools": { 
    "sSwfPath": "copy_csv_xls_pdf.swf" 
    }, 
    columnDefs: [{ 
     targets: 0, 
     data: function (d) { 
     return d3.time.format('%Y-%m-%d')(d.first_request) ; 
     } 
    }, { 
     targets: 1, 
     data: function (d) { 
     return currencyFormat(d.amount) ; 
     } 
    } 
    ] 
} ; 

Tables Instanz erstellen:

var datatable = $('#dc-data-table').dataTable(dataTableOptions) ; 

einmal

function RefreshTable() { 
    dc.events.trigger(function() { 
    datatable.api() 
     .clear() 
     .rows.add(tableDimension.top(Infinity)) 
     .draw() ; 
    }); 
} 
for (var i = 0; i < dc.chartRegistry.list().length; i++) { 
    var chartI = dc.chartRegistry.list()[i]; 
    chartI.on("filtered", RefreshTable); 
} 
RefreshTable() ; 

Anruf Refresh() Anfangsdaten zu laden, und machen alle Diagramme:

erstellen Refreshfunktion und fügen zu Diagrammen

RefreshTable() ; 
dc.renderAll() ;