jQuery Datatables - 具有Flat数组源的Datatable中的自定义元素
我正在尝试使用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>
但是Button没有显示，ID正在显示。
有人可以帮忙吗？
2 个答案:
答案 0 :(得分：2)
<强> DEMO
您的columnDefs应该定位到8th列，而不是-1，并且您每个记录检索了8个列详细信息，但最后一列已分配给操作，并且完全有7因此8th行用于获取id。以下是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>
答案 1 :(得分：0)
尝试这个解决方案，它更灵活，适合我。甚至你可以在Actions中设置动态ID。
var JSONData = JSON.parse(AjaxResponse);
$.each(JSONData, function (i, item) {
var $row = $('<tr/>');
var Actions="here Will be your Actions HTML";
$row.append('<td>' + item.EmployName+ '</td><td>' + item.Salary+ '</td><td>' + item.Position+ '</td><td>' + item.City+ '</td><td>' +Actions + '</td>');
});
if ($.fn.dataTable.isDataTable(#employee-grid"))
;
else
$(#employee-grid").DataTable({ "bInfo": false, "bPaginate": false, "bLengthChange": false, "autoWidth": false, "order": [[0, "desc"]], "aoColumnDefs": [{ "bSortable": false, "aTargets": [1] }] });
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？