добавить больше столбцов в дочерние элементы и удалить строки с датой, поставив флажок в дочерних

Question

Я использовал в своем шаблоне от datatable (). Теперь я хочу скрыть или поместить несколько столбцов в дочерний элемент с большим размером экрана, но это только скрытые столбцы с небольшим размером экрана. Как я могу решить это? И я хочу удалить более одной строки флажком, когда флажок столбца скрыт. Как я могу это ?? Когда я изменяю размер моего экрана, данные не существуют во входных данных дочернего столбца, но я существую в обычном столбце большого размера. Как защитить данные в обоих режимах? ??

html

<button type="button" class="btn btn-success" id="addRow">newRow</button>
<button type="button" class="btn btn-danger float-left" id="delete-row">deleteRow</button>

   <table id="list_product" class="display" style="width:100%">
        <thead>
            <tr>
                <th>name</th>
                <th>code</th>
                <th>mainGroup</th>
                <th>subGroup</th>
                <th>count</th>
                <th>unit</th>
                <th>model</th>
                <th>price_per_unit</th>
                <th>last_price</th>
                <th>rebate_persent</th>
                <th>remove</th>
                <th class="d-none"></th>
            </tr>
        </thead>
    </table>

js

var t = $('#list_product').DataTable({
    stateSave: true,
    "paging":   false,
    "ordering": false,
    "info":     false,
    "searching": false,
    responsive: true,
    "columns": [
        { "width": "12%" },
        { "width": "10%" },
        { "width": "11%" },
        { "width": "11%" },
        { "width": "10%" },
        { "width": "10%" },
        { "width": "10%" },
        { "width": "10%" },
        { "width": "10%" },
        { "width": "5%" },
        { "width": "0%" },
        null,
      ]
});

$('#addRow').on( 'click', function () {
    t.row.add( [
        '<input class="form-control nameList" name="name_'+counter+'" required type="text">',
        '<input class="form-control barcodeList" name="barcode_'+counter+'" required type="text">',
        '<select class="form-control mainGroup" name="mainGroup_'+counter+'" required onchange="categoryChange(this);">'
         +'{%for group in mainGroups%}'
          +'<option value="{{group.id}}">{{group.name}}</option>'
           +'{%endfor%}'
        +'</select>',

        '<select class="form-control subgroup" name="subGroup_'+counter+'" required>'
        +'{%for group in subGroups%}'
        +'<option value="{{group.id}}">{{group.name}}</option>'
        +'{%endfor%}'
        +'</select>',

        '<input type="number" class="form-control countProductList" min="0" name="countProduct_'+counter+'" required>',

        '<select class="form-control" name="unitProduct_'+counter+'" required>'
        +'{% for unit in units %}'
        +'<option value="{{unit.name}}">{{unit.name}}</option>'
        +'{% endfor %}'
        +'</select>',
        '<input type="text" class="form-control model_product" min="0" name="product_model_'+counter+'">',
        '<input type="number" class="form-control price_per_unitList" min="0" name="price_per_unit_'+counter+'" required>',
        '<input type="number" class="form-control last_priceList" min="0" name="last_price_'+counter+'" required>',
        '<input type="number" class="form-control" min="0" name="rebate_percent_'+counter+'">',
        '<input type="checkbox" name="record">',
        '<input class="form-control" name="row" type="hidden" value="'+counter+'">',
    ] ).draw(false);
    counter++;
});


 $("#delete-row").click(function(e) {
    e.preventDefault();

    $("table tbody").find('input[name="record"]').each(function(){
        var row = $(this).parents('tr');
        if($(this).is(":checked")){
            if ($(row).hasClass('child')) {
                t.row($(row).prev('tr')).remove().draw();
            } else {
                t.row(row).remove().draw();
            }
        }
    });
});

Answer 1

установить className:"none" в параметре columnDefs Datatable () для скрытия столбцов в дочернем элементе, например:

{className:"none" ,"targets": [9,10]}

Установить под кодом в Datatable:

  'columnDefs': [
     {
        'targets': [1, 2, 3, 4, 5],
        'render': function(data, type, row, meta){
           if(type === 'display'){
              var api = new $.fn.dataTable.Api(meta.settings);

              var $el = $('input, select, textarea', api.cell({ row: meta.row, column: meta.col }).node());

              var $html = $(data).wrap('<div/>').parent();

              if($el.prop('tagName') === 'INPUT'){
                 $('input', $html).attr('value', $el.val());
                 if($el.prop('checked')){
                    $('input', $html).attr('checked', 'checked');
                 }
              } else if ($el.prop('tagName') === 'TEXTAREA'){
                 $('textarea', $html).html($el.val());

              } else if ($el.prop('tagName') === 'SELECT'){
                 $('option:selected', $html).removeAttr('selected');
                 $('option', $html).filter(function(){
                    return ($(this).attr('value') === $el.val());
                 }).attr('selected', 'selected');
              }

              data = $html.html();
           }

           return data;
        }
     }

И под кодом в вашем скрипте

// Update original input/select on change in child row
$('#list_product tbody').on('keyup change', '.child input, .child select, .child textarea', function(e){
   var $el = $(this);
   var rowIdx = $el.closest('ul').data('dtr-index');
   var colIdx = $el.closest('li').data('dtr-index');
   var cell = table.cell({ row: rowIdx, column: colIdx }).node();
   $('input, select, textarea', cell).val($el.val());
   if($el.is(':checked')){ 
      $('input', cell).prop('checked', true);
   } else {
      $('input', cell).removeProp('checked');
   }});