Question

我想从我的 ajax 源创建下拉列，但我无法完成，我尝试了一切。

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

在示例中，我尝试在下拉列表中包含 office 列。

你能帮我这个吗:(

Answer 1

您不能以您尝试使用的方式使用列渲染器。此渲染器只能访问每个单独行中的数据。它没有表中所有行的完整视图。所以它看不到哪些办公数据已经被处理，或者将被处理。

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

预处理您的 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> 元素。

带有 Ajax 的下拉列

1 个答案: