Bootstrap分頁不起作用

Question

我想用bootstrap做分頁。
這是我的代碼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

。在此請看：

$('#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。祝你好運！

我想這也許可以更優化，但它確實需要在目前的東西。

Answer 2

您不能正確地將數據添加到表中。

嘗試使用此 https://datatables.net/reference/api/row.add()

或者看看如何作爲@Ryan說你是在一種奇怪的方式將您的數據添加數據 https://datatables.net/examples/data_sources/index.html