Ajax 下拉列

Question

我想从我的 ajax 来源创建下拉列，但我无法完成我尝试了所有方法。

http://live.datatables.net/hexidaqi/1/edit

在示例中，我尝试在下拉列表中包含办公室列。

你能帮我解决这个问题吗:(

Answer 1

您不能按照您尝试使用列呈现器的方式来使用它。此呈现器只能访问每个单独行中的数据。它没有 table 中所有行的完整视图。所以它看不到哪些office数据已经处理，或者将要处理。

为了解决这个问题，我可以想到两种方法（可能还有更多我想不到的方法）：

预处理您的 ajax JSON 以便您已经构建了一个唯一办公室名称列表，并将其添加到您的 [=90= 中的每个对象]（或类似的）以便此数据现在可用于您的列渲染器。
等到 table 完成创建（没有列渲染器和 select 列表）- 然后从数据构建 select 列表在 table 中，并将办公室值替换为 select 列表。

这是第二种方法：

$(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>

在 table 构建完成后，我们可以访问列索引 2（Office 列）中的数据：

var officeData = this.api().column(2).data();

然后我们可以处理每个唯一值并创建一个 select 列表 <option>:

officeData.unique().sort().each( ... );

为 select 列表构建 HTML 后，我们可以用这个新的 select 列表替换所有 Office 列的节点：

officeSelect.appendTo( $('table#example tbody td:nth-child(3)').empty() );

请注意，DataTables 列索引从零开始，但 jQuery :nth-child selector 从 1 开始 - 这就是为什么我们有 column(2) 但 td:nth-child(3).

这是一个基本的解决方案 - 例如，没有任何事件处理程序附加到 select 列表。如果你真的想用用户制作的 selection 做一些有用的事情，那将是额外的工作（并且可能是一个新问题）。

为了完整起见，这是我的来源JSON:

{ "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "0,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "age": "23"
    },
    {
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "0,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "age": "34"
    },
    {
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": ",000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "age": "45"
    },
    {
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "3,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "age": "36"
    },
    {
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "2,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "age": "42"
    }
] }

更新

基于以下评论之一提供的example：

这是一个聪明的方法，但对于您要解决的问题来说，它似乎过于复杂了 - 而且，正如您所指出的，它假定每个值在整个值集中都是唯一的列。

这是一个修改后的方法，它从我原来的方法中做了一些新的事情：

它在 DataTable 节点上运行，因此所有页面的值都可用。
它捕获源数据中提供的值，select作为下拉列表中的“selected”（显示）值：

$(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() );
    } );
  }

} ); 

} );

通过抓取数据中的节点table:

this.api().column(2).nodes()

...我们可以为 table 中的所有行构建下拉列表，而不考虑分页。

通过将单元格的值与唯一办公室的主列表进行比较，我们知道何时将 selected 属性添加到 <option> 元素。

Ajax 下拉列

Dropdown Column with Ajax

datatable

dropdown