For inserting data into the select box in Bootstrap datatables.

Excuse me.
It is being developed by Jquery, Bootstrap, and Java.
I have installed a select box in the datables this time, but I don't know how to put the data in.
If you understand, please let me know.

Code for additional HTML parts.

<table id="kategoriTanka" class="table table-border table-hover table-striped center-all">
  <thead>
    <tr>
      <th style="width:25%;text-align:center;">Column A</th>
      <th style="width:25%;text-align:center;">Column B</th>
      <th style="width:50%;text-align:center;">List A</th>
    </tr>
  </thead>
</table>

Code for the data table portion.
I would like to display a select box in the LISTA section of the third row and put the data in the data table, but I don't understand the description in the data table and how to put the data in it.
Sorry for the inconvenience, but I appreciate your cooperation.

$('#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){
              varID = $('#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>";
              },
            },
        ],
      });

javascript jquery bootstrap

2022-09-30 13:50

1 Answers

In the render of ListA, why don't we return the &select> string containing <option>?

First of all, I made a demo assuming that ListA will have an array.

$('#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){
       varhtml="";
       html+="<select class='form-control'id='ListA'>";
       for (var value of data) {
         html+="<option value='+val+"'>"+val+"</option>"
       }
       html+="</select>"
       return html;
     },
   }, ],
 });

<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;">Column A</th>
      <th style="width:25%;text-align:center;">Column B</th>
      <th style="width:50%;text-align:center;">List A</th>
    </tr>
  </thead>
</table>

2022-09-30 13:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656