Blame view

datalets/datatable-datalet/datatable-datalet.html 3.89 KB
73bcce88   luigser   COMPONENTS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
  <!--

  @group ROUTETOPA Polymer Core Elements

  

  The `datatables-datalet` is a porting of Datatables JQuery library in a web component that has built up by using Polymer.

  Pass to this component a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a

  table with data and query attributes with all Datatables library features.

  

  ### Code

  

  Example

  

      <datatables-datalet

          dataUrl="http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&amp;limit=50"

          query="$.result.records..Supplier $.result.records..Amount">

      </datatables-datalet>

  

  @class datatables-datalet

  -->

  <link rel="import" href="../../bower_components/polymer/polymer.html">

  <link rel="import" href="../base-datalet/base-datalet.html">

  

  <dom-module id="datatable-datalet">

      <template>

          <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.css">

          <link rel="stylesheet" href="js/DataTables-master/media/css/dataTables.bootstrap.css">

  

          <table id="datatable" class="table table-striped table-bordered" cellspacing="0" style="height: auto; width: auto;">

          </table>

          <base-datalet data-url="{{dataUrl}}" query="{{query}}"></base-datalet>

      </template>

  

      <script src="js/DataTables-master/media/js/jquery.dataTables.js"></script>

      <script src="js/DataTables-master/media/js/dataTables.bootstrap.js"></script>

  

      <script>

          var DatatableBehavior = {

              tempData : null,

              selectData: function(e){

                  var queries =  this._component.query.split("###");

  

                  for (i = 0; i < queries.length; i++) {

                      var propName = this.getPropertyName(queries[i]);

  

                      this.tempData = jsonPath(this.properties.json_results.value, queries[i]);

                      if(!this.tempData || this.tempData == undefined) return;

                      for (j = 0; j < this.tempData.length; j++) {

                          if (i == 0) this.properties.data.value[j] = {};

                          currObj = {};

                          currObj[propName] = this.tempData[j];

                          jQuery.extend(this.properties.data.value[j], currObj);

                      }

                  }

              },

              transformData: function(){

                  if(!this.tempData || this.tempData == undefined) return;

                  html = "";

                  html += '<thead>'+

                             '<tr>';

                  for(value in this.properties.data.value[0]){

                     html += '<th>' + value + '</th>';

                  }

                  html +=  '</tr>' +

                           '</thead>' +

                           '<tfoot>' +

                           '<tr>';

                  for(value in this.properties.data.value[0]){

                      html += '<th>' + value + '</th>';

                  }

                  html += '</tr>' +

                          '</tfoot>' +

                          '<tbody>';

                  for(key in this.properties.data.value){

                      html += '<tr>';

                      for(value in this.properties.data.value[0]) {

                        html += '<td>' + this.properties.data.value[key][value] + '</td>';

                      }

                      html += '</tr>';

                  }

                  html += '</tbody>';

  

                  $(this._component.$.datatable).append(html);

                  $(this._component.$.datatable).DataTable();

              }

          };

  

          Polymer({

              is : 'datatable-datalet' ,

              ready: function(){

                  var DatatableComponentBehavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior,AjaxJsonDataRequestBehavior, DatatableBehavior);

                  DatatableComponentBehavior.init(this);

              }

  

          });

      </script>

  </dom-module>