我想从我的 ajax 源创建下拉列,但我无法完成,我尝试了一切。
http://live.datatables.net/hexidaqi/1/edit
在示例中,我尝试在下拉列表中包含 office 列。
你能帮我这个吗:(
答案 0 :(得分:0)
您不能以您尝试使用的方式使用列渲染器。此渲染器只能访问每个单独行中的数据。它没有表中所有行的完整视图。所以它看不到哪些办公数据已经被处理,或者将被处理。
为了解决这个问题,我可以想到两种方法(可能还有更多我想不到的方法):
预处理您的 ajax JSON,以便您已经构建了一个唯一办公室名称列表,并将其添加到您的 JSON(或类似)中的每个对象,以便您的列渲染器现在可以使用这些数据.
等到表创建完成(没有列渲染器和选择列表) - 然后从表中的数据构建选择列表,并用选择列表替换 office 值。>
这是第二种方法:
$(document).ready(function() {
var table = $('#example').DataTable( {
ajax: {
url: "my test URL here - see the JSON data below"
},
searching: "false",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "age" },
{ data: "start_date" },
{ data: "salary" }
],
initComplete: function(settings, json) {
var officeData = this.api().column(2).data();
var officeSelect = $('<select><option value=""></option></select>');
officeData.unique().sort().each( function ( d, j ) {
officeSelect.append( '<option value="' + d + '">' + d + '</option>' );
} );
officeSelect.appendTo( $('table#example tbody td:nth-child(3)').empty() );
}
} );
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
建表完成后,我们可以访问索引2(Office列)中的数据:
var officeData = this.api().column(2).data();
然后我们可以处理每个唯一值并创建一个选择列表<option>
:
officeData.unique().sort().each( ... );
为选择列表构建 HTML 后,我们可以用这个新的选择列表替换所有 Office 列的节点:
officeSelect.appendTo( $('table#example tbody td:nth-child(3)').empty() );
请注意,DataTables 列索引从 0 开始,但 jQuery :nth-child
选择器从 1 开始 - 这就是我们有 column(2)
但有 td:nth-child(3)
的原因。
这是一个基本的解决方案 - 例如,没有任何事件处理程序附加到选择列表。如果您真的想对用户所做的选择做一些有用的事情,那么这将是额外的工作(并且可能是一个新问题)。
为了完整起见,这是我的源 JSON:
{ "data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"age": "23"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"age": "34"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"age": "45"
},
{
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29",
"office": "Edinburgh",
"age": "36"
},
{
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28",
"office": "Tokyo",
"age": "42"
}
] }
更新
基于以下评论之一中提供的 example:
这是一种聪明的方法,但对于您要解决的问题来说,它似乎过于复杂了——而且,正如您所指出的,它假设每个值在列中的整个值集中都是唯一的。
这是一个经过修改的方法,它从我的原始方法中做了一些新的事情:
它在 DataTable 节点上运行,以便所有页面都可以使用这些值。
它捕获源数据中提供的值,并在下拉列表中选择该值作为“选定”(显示)值:
$(document).ready(function() {
var table = $('#example').DataTable( {
ajax: {
url: "http://localhost:7000/ajax-employees"
},
searching: "false",
"pageLength": 2, // just for testing multiple pages
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "age" },
{ data: "start_date" },
{ data: "salary" }
],
initComplete: function(settings, json) {
var officeData = this.api().column(2).data();
var officeNodes = this.api().column(2).nodes().toArray();
var officeList = officeData.unique().sort().toArray();
officeData.each( function ( cellValue, idx ) {
var options = '';
officeList.forEach((office) => {
console.log( cellValue, office );
if (office === cellValue) {
options = options + '<option value="' + office + '" selected>' + office + '</option>';
} else {
options = options + '<option value="' + office + '">' + office + '</option>';
}
console.log( options );
} );
var officeSelect = $('<select>' + options + '</select>');
officeSelect.appendTo( $(officeNodes[idx]).empty() );
} );
}
} );
} );
通过捕获数据表中的节点:
this.api().column(2).nodes()
...我们可以为表格中的所有行构建下拉菜单,而不管分页如何。
通过将单元格的值与唯一办公室的主列表进行比较,我们知道何时将 selected
属性添加到 <option>
元素。