Bootstrap Paginierung funktioniert nicht

Question

Ich versuche, Seitenumbruch mit Bootstrap zu tun.
Dies ist mein Code Code https://jsfiddle.net/x9u8u7h5/2/
Seitenumbruch funktioniert nicht in meinem Code.Was habe ich falsch gemacht?

var roleList=[{ 
"sNo"  :"1", 
"roleName":"Designer" 
}, 
{ 
"sNo"  :"2", 
"roleName":"Developer" 
}, 
{ 
"sNo"  :"3", 
"roleName":"HR Dept" 
}, 
{ 
"sNo"  :"4", 
"roleName":"Project Manager" 
} 
]; 

$(document).ready(function(){debugger 
    $('#mydata').dataTable({ 

      }); 
      empRoles(); 
      $('.update').hide(); 

}); 

function empRoles(){ 
     for(var i=0;i<roleList.length;i++) 
     { 
     var table='<tr id="row'+i+'"><td>'+roleList[i].sNo+'</td><td class="roleName" id="name'+i+'">'+roleList[i].roleName+'</td><td><button class="btn dlt btn-danger" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>Delete</button></td><tr>'; 
     $('#roleListTable').append(table) 
     } 
} 

Answer 1

Wie @ Ryan sagt Sie hinzufügen Ihre Daten in einer ungeraden Weise. Werfen Sie einen Blick auf diese:

$('#mydata').dataTable({ 
    "data": roleList, 
    "columns": [{ 
     "data": "sNo" 
    }, { 
     "data": "roleName", 
     "className": "roleName" 
    }, { 
     "data": "roleName", 
     "render": function() { 
      return $("<button></button>", { 
       "text": "Delete", 
       "class": "btn dlt", 
       "data-toggle": "modal", 
       "data-target": "#confirm" 
      }).prepend("<i></i>", { 
       "class": "fa fa-trash-o" 
      }).prop("outerHTML") 
     } 
    }], 
    "createdRow": function(row, data, dataIndex) { 
     $(row).attr("id", "row" + data.sNo); 
    }, 
    "rowCallback": function(row, data, index) { 
     $('td:eq(1)', row).attr("id", "name" + data.sNo); 
    } 
}); 

Dies tut alles, was Sie taten, sich über den Aufbau der Zeilen manuell und es sollten Sie viel mehr Kontrolle über Ihre Daten geben. Arbeiten JSFiddle hier. Viel Glück!

Ich denke, es könnte wahrscheinlich mehr optimiert werden, aber es tut, was Sie derzeit brauchen.

Answer 2

Sie fügen Ihre Daten nicht korrekt in die Tabelle ein.

Versuchen Sie, diese aussehen mit https://datatables.net/reference/api/row.add()

alternativ an, wie Daten hinzufügen https://datatables.net/examples/data_sources/index.html