Datatable with no paging. Why?

matheus_cardoso

I'm working with a set of "metrics" data that to requires dynamic creation of Datatables as the number o "metrics" tend to varies.
As I generate the Html code to include the tables, they are shown without any pagination (all the rows one after another, generating a huge table in my page). I'm using a Json response to generate the data, and here is the code:

$.getJSON($url+'?request=exdaily&id_cam='+$id_cam, function(json){
              $.each(json.data, function(key, value){
                $(".metrics-container").append(metricTable(key, value));
                $("#daiTable #"+key).DataTable({
                  "paging": true
                });
              });
            })
            .done(function(){
            });

the metricTable function:

function metricTable(mKey, mValue){
        var html;
        html += 
        '<div style="clear:both;" id="daiDiv">'+
          '<h3 class="daily tableTitle blue">'+mKey+'</h3>'+
          '<table id="daiTable '+mKey+'" border="0" class="table table-hover">'+
            '<thead>'+
              '<tr>'+
                '<th>DateCreated</th>'+
                '<th>Experience</th>'+
                '<th>Revenue</th>'+
              '</tr>'+
            '</thead>'+
            '<tbody>';

        $.each(mValue, function(key, value){
          html +=
          '<tr>'+
            '<td>'+value['DateCreated']+'</td>'+
            '<td>'+value['Experience']+'</td>'+
            '<td>'+value['Revenue']+'</td>'+
          '</tr>';
          });
          html += '</tbody>'+
          '</table>'+
          '<div id="dateSlider"></div>'+
          '<div>'+
            '<h4 class="revenue" style="display: inline-block;"></h4>'+
            '<p class="back2top blue">Back to Top</p>'+
          '</div>'+
        '</div>';
      
      return html;
}

Note: the $(".metrics-container") is a Div inside the Html body.
I will gladly give more details in order to solve this problem, thanks!

allan

$("#daiTable #"+key)

I don't know what a space will do in an ID, but it doesn't make it into something that can be selected like that - that's a descendant selector of an id.

I'd suggest using $("#daiTable-"+key) and updating your generation code to match that selector.

Allan