jquery data table in lightning component

I'm trying to add a jQuery data table in Salesforce lightning component. Here is the code. It is not loading at all. What am I doing wrong?

<ltng:require scripts="{!join(',','//cdn.datatables.net/1.10.4/css/jquery.dataTables.css'
                        ,'//code.jquery.com/jquery-1.12.4.js'
                        ,'//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'
                        ,'//cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js'
                        ,'//cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js'
                        ,'//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'
                        ,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js'
                        ,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js'
                        ,'//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js'
                        ,'//cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js')}"
            afterScriptsLoaded="{!c.afterscriptsLoaded}"/>
or
<ltng:require scripts="{!join(',',$Resource.datatable + '/DataTables-1.10.16/css/jquery.dataTables.css'
                           ,$Resource.datatable + '/jQuery-1.12.3/jquery-1.12.3.js'
                            ,$Resource.datatable + '/DataTables-1.10.16/js/jquery.dataTables.min.js'
                           ,$Resource.datatable + '/Buttons-1.5.1/js/dataTables.bootstrap.min.js'
                            ,$Resource.datatable + '/Buttons-1.5.1/js/buttons.flash.min.js'
                            ,$Resource.datatable + '/JSZip-2.5.0/jszip.min.js'
                            ,$Resource.datatable + '/pdfmake-0.1.32/pdfmake.min.js'
                            ,$Resource.datatable + '/pdfmake-0.1.32/vfs_fonts.js'
                            ,$Resource.datatable + '/Buttons-1.5.1/js/buttons.html5.min.js'
                            ,$Resource.datatable + '/Buttons-1.5.1/js/buttons.print.min.js')}"
              	afterScriptsLoaded="{!c.afterscriptsLoaded}"/>
<table id="showContacts" class="slds-table slds-table--bordered slds-table--cell-buffer">
          <thead>
            <tr class="slds-text-title--caps">
                <th class="slds-is-sortable slds-text-title--caps">
                  <span class="slds-truncate" title="EID">EID</span>  
               </th>
               <th class="slds-is-sortable slds-text-title--caps">
                  <span class="slds-truncate" title="Name">Name</span>
               </th>
          </tr>
  </thead>
  <tbody>
      <tr>
         <td scope="row">
             <div class="text-wrap">10887738</div>
         </td>
         <td>
            <div class="slds-truncate  text-wrap" title="Adam Will"><a href="javascript:void(0);">Adam, Will</a></div>
         </td>
    </tr>
</tbody>
</table>
({
afterscriptsLoaded : function(component,event,helper){
    j$('[id$="showContacts"]').DataTable({
            "scrollY": "260px",
            "scrollCollapse": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "dom": 'Bfrtip',
           "destroy" : true,
            "buttons": [
                        'copy',
                        {extend: 'csv',title: 'Criteria export'},
                        {extend: 'excel',title: 'Criteria export'},
                        {extend: 'pdf',title: 'Criteria export'},
                        'print'
            ]
        } );
},
})