OpenLayers WFS with automatically filled Attribute Table

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body onload="init()">
    <p>OpenLayers WFS with automatically filled (responsive) Attribute Table (jquery datatables)</p>
    <div id="map"></div>
    <table id="attribute"></table>
</body>

CSS

html, body {
    width:100% height:100%
}
#map {
    width: 100%;
    height: 250px;
}
#attribute {
}

JavaScript

var map;
var layer, wms, selectControl,vectorSource2, precinctV ;

function init() {


    map = new OpenLayers.Map('map');
    wms = new OpenLayers.Layer.WMS(
        "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
        layers: 'basic'
    });


vectorSource2 = new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      url: function(extent){
        return 'https://maps-public.geo.nyu.edu/geoserver/sdr/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sdr:nyu_2451_35325&maxFeatures=50&outputFormat=application%2Fjson'
      },
      strategy: ol.loadingstrategy.bbox

    });

 precinctV = new ol.layer.Vector({
source: vectorSource2
});

    map.addLayers([wms, precinctV]);
    map.setCenter(new OpenLayers.LonLat(146.7, -41.8), 6);


    layer.events.on({
        featuresadded: onFeaturesAdded
    });


    var table = $('#attribute').dataTable({
        responsive: 'true',
            "columns": [{
            "title": "Name"
        }, // NAME
        {
            "title": "Country"
        }, //ADM0NAME
        {
            "title": "GN_POP"
        }, {
            "title": "DIFFNOTE",
            "class": "center"
        }, {
            "title": "MAX_AREAKM",
            "class": "center"
        }]
    });

    $('#attribute tbody').on('click', 'tr', function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });



    function onFeaturesAdded(event) {
        table.fnClearTable();

        var dataSet = [];

        for (var i = 0; i < layer.features.length; i++) {
            var attribute = layer.features[i].attributes;
            dataSet.push(
            [
            attribute.NAME,
            attribute.ADM0NAME,
            attribute.GN_POP,
            attribute.DIFFNOTE,
            attribute.MAX_AREAKM]);



        }
       ...