Arhn - архитектура программирования

Кнопки в первом столбце исчезают при сортировке таблицы

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

Ideal  Проблема

JavScript:

    $(document).ready(function() {

    $.getJSON('/apps/mchp/clientlibs/clientlib-site/components/parametrictable/data.txt', function(json) {


    var data = json.data;
    var $thead = $('#parametrictable').find('thead');
    var tr = $("<tr>");
    $thead.append(tr);
    var columns = [];
    var obj = Object.keys(data[0]);
    console.log(data[0])
    var button = '<div class="left-btn"><i class="download fas fa-file-download"></i></div><div class="right-btn"><div class="input-group"><div class="input-group-area"><input type="text" value="100"></div><div class="input-group-icon">BUY</div></div></div>';


    $.each(data[0], function(name, value) {
      var column = {
        "data": name,
        "title":name
      };
    $('tr').find('th:first-child',).remove();

      columns.push(column);

    });

    for (i=1; i<obj.length; i++) {
        $(".dropdown-content").append('<li><input type="checkbox" class="dropcheck" data-column="'+i+'"/>'+obj[i]+'</li>');
    }   

    var table= $('#tableId').DataTable({
      data: data,
      columns: columns,
        columnDefs: [ {
            orderable: true,
            className: 'select-checkbox',
            targets:   1
        } ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    });

    $('tr').find('th:first-child').remove();
    $('tr').find('td:first-child').remove();
    $('tr').find('td:first-child').append(button);


  $('tr').on('change', function(e){
    e.preventDefault();
    console.log('change!');
  });

  $('input[type=checkbox]').on( 'change', function (e) {
    e.preventDefault();
    var column = table.column( $(this).attr('data-column') );
    column.visible( ! column.visible() );
    } );

  $('.show-all').on( 'click', function (e) {
     e.preventDefault();
    var obj = Object.keys(data[0])
    for (i=1; i<obj.length; i++) {
        var col = table.columns([i]);
        if (col.visible().join(', ') == 'false') {
            col.visible(true);
             $(".dropcheck").prop("checked", false);
        }
    }
    } ); 

   });
  })

Ответы:


1

Во-первых, не рекомендуется скрывать столбцы с данными с помощью .remove (), таблицы данных имеют для этого встроенный код с помощью columnDefs refer: https://datatables.net/examples/basic_init/hidden_columns.html

Во-вторых, это неправильный способ добавления данных / html в столбцы с данными, используйте функцию rowCallback для данных, см.:

            columnDefs: [
                 {
                   "targets": [ 0 ],
                   "visible": false,
                   "searchable": false
                },
            ],
            rowCallback: function(row, data, index) {

                if($('td:eq(1)', row).find('.download').length == 0)
                {
                    $('td:eq(1)', row).append(button);
                }
            },

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

27.03.2020
  • привет спасибо! это сработало, однако, когда я снова отсортировал таблицу, он продолжал добавлять кнопку в каждую строку. как мне запретить добавление более одной кнопки? 27.03.2020
  • о, понятно, просто проверьте, существует ли кнопка в строке перед добавлением: if ($ ('td: eq (1)', row) .find ('. download'). length == 0) {$ ('td: eq (1) ', row) .append (кнопка); } 27.03.2020
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..