我正在尝试创建一个 DataTables与 Flat array data source .
所以，我从服务器返回的数据是 -
{
"draw":5,
"recordsTotal":57,
"recordsFiltered":57,
"data":[
{
"employee_name":"Airi Satou",
"employee_salary":"162700",
"employee_position":"Accountant",
"employee_city":"Tokyo",
"employee_extension":"5407",
"employee_joining_date":"2008-11-27",
"employee_age":"33",
"id":1285
},
{
"employee_name":"Angelica Ramos",
"employee_salary":"1200000",
"employee_position":"Chief Executive Officer (CEO)",
"employee_city":"London",
"employee_extension":"5797",
"employee_joining_date":"2009-10-08",
"employee_age":"47",
"id":22874
},
{
"employee_name":"Ashton Cox",
"employee_salary":"86000",
"employee_position":"Junior Technical Author",
"employee_city":"San Francisco",
"employee_extension":"1562",
"employee_joining_date":"2009-01-11",
"employee_age":"66",
"id":10123
},
{
"employee_name":"Bradley Greer",
"employee_salary":"132000",
"employee_position":"Software Engineer",
"employee_city":"London",
"employee_extension":"2558",
"employee_joining_date":"2012-10-12",
"employee_age":"41",
"id":24680
},
{
"employee_name":"Brenden Wagner",
"employee_salary":"206850",
"employee_position":"Software Engineer",
"employee_city":"San Francisco",
"employee_extension":"1314",
"employee_joining_date":"2011-06-06",
"employee_age":"28",
"id":27777
}
]
}
我的 JS 是 -
//Applied on Table with ID = "employee-grid"
$(document).ready(function()
{
var dataTable = $('#employee-grid').DataTable(
{
processing: true,
serverSide: true, //For Enabling AJAX
"deferRender": true, //For Speed up procesing time
"ajax":
{
"url": "employee-grid-data.php",
"type": 'POST',
"data": function ( d ) //Sending Custom Data for manupulating with elements out of the table
{
d.StartDate = "12-13-14";
d.EndDate = "Fuck You";
d.StateID = 123;
// d.custom = $('#myInput').val();
// etc
},
"error": function() //Custom Error Function
{ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
},
"columns": [ //Name should be same as PHP file JSON NAmes and ordering should be as in the HTML file
{ "data": "employee_name" },
{ "data": "employee_salary" },
{ "data": "employee_position" },
{ "data": "employee_city" },
{ "data": "employee_extension" },
{ "data": "employee_joining_date" },
{ "data": "employee_age" },
{ "data": "id" }
],
"columnDefs": [ //For Action Buttons (Edit and Delete button) adding in the Action Column
{
"orderable": false, //Turn off ordering
"searchable": false, //Turn off searching
"targets": -1, //Going to last column
"data": null, //Not receiving any data
"defaultContent": '<div style="min-width:70px" class="btn-group" role="group"><button type="button" class="edit btn btn-warning btn-sm"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button><button type="button" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></div>'
}
],
});
$("#employee-grid_filter").css("display","none"); // hiding global search box
});
HTML 是 -
<table id="employee-grid" class="display" cellspacing="0" width="100%">
<thead>
<!-- Problamatic Part -->
<!-- <tr>
<th rowspan="2">Name</th>
<th colspan="2">HR Information</th>
<th colspan="3">Contact</th>
</tr> -->
<!-- Problamatic Part - END -->
<tr>
<th>Employee Name</th>
<th>Salary</th>
<th>Position</th>
<th>City</th>
<th>Extension</th>
<th style="min-width: 110px;">Joining Date</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" id="0" placeholder="Search" class="employee-search-input"></td>
<td><input type="text" id="1" placeholder="Search" class="employee-search-input"></td>
<td><input type="text" id="2" placeholder="Search" class="employee-search-input" ></td>
<td><input type="text" id="3" placeholder="Search" class="employee-search-input" ></td>
<td><input type="text" id="4" placeholder="Search" class="employee-search-input" ></td>
<td valign="middle"><input type="text" id="5" placeholder="Select Date" class="employee-search-input datepicker" readonly="readonly"></td>
<td><input type="text" id="6" placeholder="Search" class="employee-search-input" ></td>
<th><input type="hidden"></th>
</tr>
</thead>
</table>
我得到这样的输出-
因此操作列中没有添加任何按钮。
但是我已经覆盖了这样的操作列内容-
"columnDefs": [ //For Action Buttons (Edit and Delete button) adding in the Action Column
{
"orderable": false, //Turn off ordering
"searchable": false, //Turn off searching
"targets": -1, //Going to last column
"data": null, //Not receiving any data
"defaultContent": '<div style="min-width:70px" class="btn-group" role="group"><button type="button" class="edit btn btn-warning btn-sm"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button><button type="button" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></div>'
}
],
所以，按钮代码是-
<div style="min-width:70px" class="btn-group" role="group"><button type="button" class="edit btn btn-warning btn-sm"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button><button type="button" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></div>
但是按钮没有显示，ID 正在显示。
有人可以帮忙吗？
最佳答案
<强> DEMO
您的 columnDefs 应该具有目标第 8 列，而不是 -1，并且您正在为每个记录检索 8 个列详细信息，但已将最后一列分配给总共有 7 操作，因此用于获取 id 的第 8 行。以下是 JS 部分以及 html 部分的更改:
"columnDefs": [
//For Action Buttons (Edit and Delete button) adding in the Action Column
{
"orderable": false, //Turn off ordering
"searchable": false, //Turn off searching
"targets": [8], //Going to last column
"data": null, //Not receiving any data
"defaultContent": '<div style="min-width:70px" class="btn-group" role="group"><button type="button" class="edit btn btn-warning btn-sm"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button><button type="button" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></div>'
}
],
和HTML
<tr>
<th>Employee Name</th>
<th>Salary</th>
<th>Position</th>
<th>City</th>
<th>Extension</th>
<th style="min-width: 110px;">Joining Date</th>
<th>Age</th>
<th>ID</th> <!--Add one more ID-->
<th>Action</th>
</tr>
<tr>
<td><input type="text" id="0" placeholder="Search" class="employee-search-input"></td>
<td><input type="text" id="1" placeholder="Search" class="employee-search-input"></td>
<td><input type="text" id="2" placeholder="Search" class="employee-search-input" ></td>
<td><input type="text" id="3" placeholder="Search" class="employee-search-input" ></td>
<td><input type="text" id="4" placeholder="Search" class="employee-search-input" ></td>
<td valign="middle"><input type="text" id="5" placeholder="Select Date" class="employee-search-input datepicker" readonly="readonly"></td>
<td><input type="text" id="6" placeholder="Search" class="employee-search-input" ></td>
<td><input type="text" id="7" placeholder="Search" class="employee-search-input" ></td>
<th><input type="hidden"></th>
</tr>
关于javascript - jQuery Datatables - 具有平面数组数据源的 Datatable <td> 中的自定义元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32601164/