Как создать группу переключателей для каждого ряда в datatable? - PullRequest
Новая
       17

Как создать группу переключателей для каждого ряда в datatable?

0 голосов
/ 03 июля 2019

Я заполняю информацию в datatable динамически, я добавил две радиокнопки в каждой строке для выбора да и нет.Я не могу выбрать одну радиокнопку в каждой строке за раз, только одна кнопка отмечена во всей таблице.

Я использую радиокнопки, отмеченные галочкой, как да или нет. Я собираю информацию построчно и сохраняюэто в конце. 

let cTraining = {};
cTraining.bindDataTable = function(trainingDataModelDisplay) {
  $('#traineeProgramsHistoryReassign').dataTable().fnDestroy();
  var customError = "";
  if (typeof(trainingDataModelDisplay) == "string") {
    customError = trainingDataModelDisplay;
    trainingDataModelDisplay = [];
  }
  var options = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }; //, hour: 'numeric', minute: 'numeric', second: 'numeric'
  var programUserTable =
    $('#traineeProgramsHistoryReassign').dataTable({
      "pageLength": 25,
      scrollX: true,
      "ordering": false,
      //"searching": false,
      "order": [], //Initial no order.
      language: {
        paginate: {
          next: '<i class="fa fa-arrow-right"></i>', // or '→'
          previous: '<i class="fa fa-arrow-left"></i>', // or '←'
        },
        "emptyTable": "No data available may be because there are no program(s) assigned!!"
      },
      columns: [

        {
          data: 'FLSP_NAME',
          name: 'FLSP_NAME',
          title: 'Trainee Name',
          width: 50
        },
        {
          data: 'PROGRAM_NAME',
          name: 'PROGRAM_NAME',
          title: 'Program Name',
          width: 50
        },
        {
          data: 'REASSIGN_YES',
          title: 'Reassign Yes',
          width: 40,
          render: function(data, type, full, meta) {
            if (data == true) {
              return '<input id="chk1" name="radio1" type = \"radio\" checked value="' + data + '">';
            } else {
              return '<input id="chk1" name="radio1" type = \"radio\" value="' + data + '">';
            }
          }
        },
        {
          data: 'REASSIGN_NO',
          title: 'Reassign No',
          width: 40,
          render: function(data, type, full, meta) {
            if (data == true) {
              return '<input id="chk2" name="radio1" type = \"radio\" checked value="' + data + '">';
            } else {
              return '<input id="chk2" name="radio1" type = \"radio\" value="' + data + '">';
            }
          }
        },
      ],
      rowsGroup: ['FLSP_NAME:name', 'PROGRAM_NAME:name'],
      data: trainingDataModelDisplay

    });

  $('#traineeProgramsHistoryReassign tbody').on('change', '#chk1',
    function() {
      // If checkbox is not checked
      var data =
        programUserTable.api().row($(this).parents('tr')).data();
      data.REASSIGN_YES = this.checked

    });


  $('#traineeProgramsHistoryReassign tbody').on('change', '#chk2',
    function() {
      // If checkbox is not checked
      var ReassignNoProgUser = {};
      var data =
        programUserTable.api().row($(this).parents('tr')).data();
      data.REASSIGN_NO = this.checked

    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

Я хочу сгруппировать радиокнопки для каждой строки, чтобы я мог выбрать одну радиокнопку каждый раз.

Заранее спасибо.

...