ブートストラップのページネーションが機能しない

Question

ブートストラップを使用してページネーションを実行しようとしています。
これは私のコードコードhttps://jsfiddle.net/x9u8u7h5/2/
私のコードでページネーションが機能していません。私は間違っていましたか？

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

をデータを追加する方法を見て、この https://datatables.net/reference/api/row.add()

を使用してみてください。

$('#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); 
    } 
}); 

これは、手動で行を作成することで自分がやっていたことすべてを行い、データをより詳細に管理する必要があります。ここをクリックしてJSFiddleがんばろう！

私はそれはおそらく、より最適化することができると思いますが、それはあなたが現時点で必要なものを行います。私は内部件のデータを渡すことができますどのようにこのような状況.INこのhttps://jsfiddle.net/s1wnpnow/のように一つの機能を使用しています `database`.Forからテーブル件のデータを取得しています、私の実際のアプリケーションでfine.But作業

Answer 2

データをテーブルに正しく追加していません。

は、代わりに@Ryanあなたは奇妙な方法でデータを追加している言うよう にhttps://datatables.net/examples/data_sources/index.html