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