datalets/datatable-datalet/datatable-datalet.html

<!--
@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="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">

<dom-module id="datatable-datalet">
    <template>
        <link rel="stylesheet" href="js/DataTables-master/media/css/jquery.dataTables.min.css">

        <table id="datatable" class="table table-striped table-bordered" cellspacing="0" style="height: auto; width: auto;">
        </table>
        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}"></base-ajax-json-jsonpath-datalet>
    </template>

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

    <script>
        var DatatableBehavior = {

            presentData: function(){
                if(!this.data || this.data == undefined) return;
                html = "";
                html += '<thead>'+
                           '<tr>';
                for(var x = 0; x<this.data.length; x++){
                   html += '<th>' + this.data[x].name + '</th>';
                }
                html +=  '</tr>' +
                         '</thead>' +
                         '<tfoot>' +
                         '<tr>';
                for(var x = 0; x<this.data.length; x++){
                    html += '<th>' + this.data[x].name + '</th>';
                }
                html += '</tr>' +
                        '</tfoot>' +
                        '<tbody>';
                for(var i = 0; i<this.data[0].data.length; i++){
                    html += '<tr>';
                    for(var x = 0; x<this.data.length; x++){
                      html += '<td>' + this.data[x].data[i] + '</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, AjaxJsonJsonPathBehavior, DatatableBehavior);
                DatatableComponentBehavior.init(this);
            }

        });
    </script>
</dom-module>