$(document).ready( function () {

  //var table = $('#example').DataTable();

  console.log(file)

  loadDataFromSocket(file, "empty")

} );

​

​

​

//I have this object that I use for creating dynamic tables 

var dTableControl = {

  init: function(div, options) {

    var _options = options || {};

    //if (typeof options === 'not defined') { options = 'default'; }

    var tableControl = Object.create(dTableControl.prototype);

    var _div = div;

    var headers = [];

    var domTable = div.append('<table class="display">').find('table');

    var domHeader = domTable.append('<thead>').find('thead');

    var domFooter = domTable.append('<tfoot>').find('tfoot'); //ks

    var postCreatedRow = _options.createRow || function() {return;};

    tableControl.columns = [];

    tableControl.oTable = void 0;

    tableControl.getDiv = function() {

      return _div;

    };

    tableControl.getTable = function() {

      return domTable;

    };

    tableControl.getHeader = function() {

      return domHeader;

    };

    tableControl.getFooter = function() { //ks

      return domFooter;

    };

    tableControl.createdRowAction = function(_f) {

      if (!arguments.length) return postCreatedRow;

      postCreatedRow = _f;

      return this;

    };

    return tableControl;

  },

  prototype: {

    getDivs: function() {

      return this.getDiv();

    },

    addHeaders: function(_headers) {

      //var domtable = this.getTable();

      var self = this;

      var head = this.getHeader().append('<tr>').find('tr');

      _headers.forEach(function(d,i) {

        self.columns.push({ data: d })

        head.append('<th>'+d+'</th>');

      });

      return this;

    },

    create: function() {

      this.oTable = this.getTable().DataTable({

        'lengthMenu': [[5, 10, 15, 20, -1], [5, 10, 15, 20, 'All']],

        'iDisplayLength': 10,

        'data': [],

        'order': [[0,"asc"]],

        'bAutoWidth':true,

        'columns': this.columns,

        'createdRow': this.createdRowAction()

      });

      return this;

    },

    draw: function() {

      this.oTable.draw();

      return this;

    },

    addRows: function(row) {

      this.oTable.row.add(row);

      return this;

    },

    clearRows: function() {

      this.oTable.clear().draw();

      return this;

    },

    //want to draw a footer 

    addFooter: function(_footer){

        var self = this;

        var foot = this.getFooter().append('<tr>').find('tr');

        console.log("this.getFooter(): "); console.log(this.getFooter())

        console.log("this: "); console.log(this)

        console.log("foot: "); console.log(foot)

        _footer.forEach(function(d,i) {

        console.log("d"); console.log(d)

        //self.columns.push({ data: d })

        //foot.append('<th>'+d+'</th>');

        foot.append('<th><input type="text" placeholder="Search '+d+'" /></th>');

        //self.html( '<input type="text" placeholder="Search '+d+'" />' );

        });

      return this;

    }

  }

}

​

​

    //formatColumns function

    var rowformatfunctions = {

        rnc_liecences_perc_last30days: function (row, data, index) {

​

            ii = 0

            for (var key in data) {

                if (ii == 0) { //do nothing to the first column values

                } else {

                    if (parseInt(data[key].substring(0, 2), 10) >= 80) {

                        console.log(key + " -> " + data[key]);

                        $('td', row).eq(ii).css("color", "red");

                    } else {

                        $('td', row).eq(ii).css("color", "green");

                    }

                }

                ii++

            }

​

        },

        usn_licences_gb_iu_s1_pdp_att: function (row, data, index) {

​

            ii = 0

            for (var key in data) {

                if (ii == 0) { //do nothing to the first column values

                } else if (ii == 3 || ii == 6) {

                    if (parseInt(data[key].substring(0, 2), 10) >= 80) {

                        console.log(key + " -> " + data[key]);

                        $('td', row).eq(ii).css("color", "red");

                    } else {

                        $('td', row).eq(ii).css("color", "green");

                    }

                }

                ii++

            }

​

        }

​

    }

​

//then I have this function for loading my data and creating my tables 

//file is an array of objects 

//formatFunc is a function that formats the data in the data table, and is stored in options for passing to the dTableControl for formatting the datatable

//ch gets the keys from file[0] which will be the channel headers 

//then I add the headers 

//then I add the footers 

//then I create the table 

//then i build the rows 

//then I draw and this then draws all the row that were built 

//now the tricky part of applying the search to each columns

​

function loadDataFromSocket(file,formatFunc) {

    console.log("file is: " ); console.log(file)

    console.log("formatFunc is: " ); console.log(formatFunc)

    //clear the div before drawing any table

    $('#test').empty()

    //create my table 

    var options = rowformatfunctions[formatFunc] ? {'createRow':rowformatfunctions[formatFunc]} : {}

    t1=dTableControl.init($('#test'), options); 

​

    //get the array for headers 

    ch=Object.keys(file[0])

​

    //add my headers 

    //t1.addHeaders(["test1","test12","test1","test12","test1","test12","test1","test12","test1","test12","test1","test12","test1","test12","test1","test12","test1","test12","test1","test12","test1","test12","test1","test12"])

    t1.addHeaders(ch)

​

    //add the footer 

    t1.addFooter(ch);

​

    t1.create(); 

​

    //draw my rows 

    _.each(file, function(row) {

    t1.addRows(row)

    }); 

    //oTable.draw();

    t1.draw();

​

    // Apply the search

    /*t1.columns().every( function () {

        var that = this;

​

        $( 'input', this.footer() ).on( 'keyup change', function () {

            if ( that.search() !== this.value ) {

                that

                    .search( this.value )

                    .draw();

            }

        } );

    } );*/

    }

​

//sample data 

file = 

[ 

{ 

DeviceName: 'DeviceName1',

counter1: '85%',

counter2: '87%',

counter3: '75%',

counter4: '63%' },

{ 

DeviceName: 'DeviceName2',

counter1: '85%',

counter2: '87%',

counter3: '75%',

counter4: '63%' 

} 

]

​