

失礼します。  
JqueryとBootstrap、Javaで開発しています。  
今回datatables内にセレクトボックスを設置しているんですが、データの入れ方がうまくわかりません。  
わかるかたいましたら、ぜひご教授お願いいたします。

追加 HTML部分のコードです。

[code]

    <table id="kategoriTanka" class="table table-bordered table-hover table-striped center-all">
      <thead>
        <tr>
          <th style="width:25%; text-align:center;" >カラムA</th>
          <th style="width:25%; text-align:center;" >カラムB</th>
          <th style="width:50%; text-align:center;" >リストA</th>
        </tr>
      </thead>
    </table>
    
[/code]

データテーブル部分のコードです。  
３つ目の行のLISTAの部分にセレクトボックスを表示してデータテーブルにデータを入れたいと思うんですが、データテーブル内の記述とデータの入れ方がよくわかっていません。  
お手数をおかけしますが、よろしくお願いします。

[code]

          $('#tbl').on('processing.dt', function (e, settings, processing) {
              toggleBoxOverlay(processing);
            }).DataTable({
              lengthChange: false,
              displayLength: "All",
              sort: false,
              info: false,
              paging: false,
              responsive: true,
              ajax: {
                url: '/xxx/xxx',
                type: 'GET',
                data: function (param) {
                  var ID = $('#ID').val();
                  param['ID'] = ID;
                  return param;
                }
              },
              columns: [
                {
                  data: 'ColumnA',
                  render: function (data, type, row, meta) {
                  return "<input class='form-control' id='ColumnA' maxlength='50' type='text' value='" + nullToSpace(data) + "'>";
                  },
                },
                {
                  data: 'ColumnB',
                  render: function (data, type, row, meta) {
                  return "<input class='form-control' id='ColumnB' maxlength='50' type='text' value='" + nullToSpace(data) + "'>";
                  },
                },
                {
                  data: 'ListA',
                  render: function (data, type, row, meta) {
                  return "<select class='form-control' id='ListA'>"
                     + "</select>";
                  },
                },
            ],
          });
    
[/code]


CC BY-SA 3.0
2017-11-16T11:57:12.417
39624
2019-09-06T03:02:40.297
2017-11-17T01:21:39.530
26222
26222
question
javascript jquery bootstrap
Bootstrapのdatatables内におけるselectボックスにデータを挿入する場合について。


`ListA`の`render`にて`<option>`を含んだ`<select>`の文字列を返せばいいのでは？

とりあえず`ListA`に配列が来ると仮定してデモを作りました。

[code]

    $('#tbl').DataTable({
       searching: false,
       sort: false,
       paging: false,
       data: [
         {ColumnA: 3, ColumnB: 12, ListA: [1, 3, 4]},
         {ColumnA: 6, ColumnB: 2, ListA: [10, 3, 1]},
       ],
       columns: [{
         data: 'ColumnA',
         render: function(data, type, row, meta) {
           return "<input class='form-control' id='ColumnA' maxlength='50' type='text' value='" + data + "'>";
         },
       }, {
         data: 'ColumnB',
         render: function(data, type, row, meta) {
           return "<input class='form-control' id='ColumnB' maxlength='50' type='text' value='" + data + "'>";
         },
       }, {
         data: 'ListA',
         render: function(data, type, row, meta) {
           var html = "";
           html += "<select class='form-control' id='ListA'>";
           for (var val of data) {
             html += "<option value='" + val + "'>" + val + "</option>"
           }
           html += "</select>"
           return html;
         },
       }, ],
     });
[/code]

[code]

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    
    <table id="tbl">
      <thead>
        <tr>
          <th style="width:25%; text-align:center;">カラムA</th>
          <th style="width:25%; text-align:center;">カラムB</th>
          <th style="width:50%; text-align:center;">リストA</th>
        </tr>
      </thead>
    </table>
[/code]


CC BY-SA 4.0
2017-11-17T06:58:36.400
39645
2018-07-14T09:35:15.670
2018-07-14T09:35:15.670
20206
39624
answer