jQuery Collapse не работает должным образом - PullRequest
Новая
       5

jQuery Collapse не работает должным образом

3 голосов
/ 09 октября 2019

Текущая ситуация:

У меня есть HTML-страница с таблицей для отображения моих данных. Данные поступают из ответа jQuery ajax. Я добавляю данные в таблицу. Но по какой-то причине он показывает данные два раза, а css не работает для добавления. CSS обрабатывается шаблоном, который я использую

HTML: 

<table id="js-table-sections" class="js-table-sections table table-hover">

jQuery: 

$('.js-data-example-ajax').select2({
  ajax: {
    url: '/product/api/elasticsearch',
    dataType: 'json',
    width: 'resolve', // need to override the changed default
    minimumResultsForSearch: -1,
    dropdownCssClass: 'select2-hidden',

    success: function (data) {
      // var returnedData = data;
      // clear table
      $('#js-table-sections tbody').empty();                    
      // addProducts(data.results[0]);                              
      for(let i = 0; i < data.results.length; i++){
        $("#js-table-sections")
          .find('tbody')
          .append(
            $('<tr><td class="text-center"><i class="fa fa-angle-right"></i></td><td class="font-     w600">data.results[i].id</td><td><span class="badge badge-success">VIP</span></td><td class="d-none d-sm-table-cell"><em class="text-muted">October 28, 2017 12:16</em></td></tr></tbody>')
          );                            
      }
    }
  }
});

Цель достижения:

  • Почему MI получает дублированный контент
  • Существует ли эффективный способ добавления данных в мою таблицу

Обновление: .js-data-example-ajax импортируется из этого css 

<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/ttskch/select2-bootstrap4-theme@master/dist/select2-bootstrap4.min.css" rel="stylesheet">

Обновление 2: 

<table id="js-table-sections" class="js-table-sections table table-hover">
    <thead>
        <tr>
            <th style="width: 30px;"></th>
            <th>Name</th>
            <th style="width: 15%;">Access</th>
            <th class="d-none d-sm-table-cell" style="width: 20%;">Date</th>
        </tr>
    </thead>
    <tbody class="js-table-sections-header show table-active">
        <tr>
            <td class="text-center">
                <i class="fa fa-angle-right"></i>
            </td>
            <td class="font-w600">Brian Stevens</td>
            <td>
                <span class="badge badge-success">VIP</span>
            </td>
            <td class="d-none d-sm-table-cell">
                <em class="text-muted">October 28, 2017 12:16</em>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $185,00</td>
            <td class="font-size-sm">Stripe</td>
            <td class="d-none d-sm-table-cell">
                <span class="font-size-sm text-muted">October 19, 2017 12:16</span>
            </td>
        </tr>                                   
    </tbody>                                                    
</table>

1 Ответ

2 голосов
/ 10 октября 2019

Во-первых, вам нужно исправить синтаксис, чтобы получить правильную структуру, чтобы ваш коллапс работал. Во-вторых, как только вы закончите append(), вам нужно снова вызвать логику коллапса. Ниже вы найдете модифицированную версию 

$('.js-data-example-ajax').select2({
    ajax: {
        url: '/product/api/elasticsearch',
        dataType: 'json',
        width: 'resolve', // need to override the changed default
        minimumResultsForSearch: -1,
        dropdownCssClass: 'select2-hidden',

        success: function (data) {
            let table = $('#js-table-sections');
            table.find('tbody').remove();
            if (data && Array.isArray(data.results)) {
                data.results.forEach(item => {
                    table.append
                        (`<tbody class="js-table-sections-header table-active">
                        <tr>
                            <td class="text-center">
                                <i class="fa fa-angle-right"></i>
                            </td>
                            <td class="font-w600">${item.id}</td>
                            <td>
                                <span class="badge badge-success">VIP</span>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <em class="text-muted">October 28, 2017 12:16</em>
                            </td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td class="text-center"></td>
                            <td class="font-w600 text-success">+ $185,00</td>
                            <td class="font-size-sm">Stripe</td>
                            <td class="d-none d-sm-table-cell">
                                <span class="font-size-sm text-muted">October 19, 2017 12:16</span>
                            </td>
                        </tr>
                        <!--  <tr>
                            <td class="text-center"></td>
                            <td class="font-w600 text-success">+ $${item.rma}</td>
                            <td class="font-size-sm">Stripe</td>
                            <td class="d-none d-sm-table-cell">
                                <span class="font-size-sm text-muted">October 1, 2017 12:16</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center"></td>
                            <td class="font-w600 text-success">+ $51,00</td>
                            <td class="font-size-sm">Stripe</td>
                            <td class="d-none d-sm-table-cell">
                                <span class="font-size-sm text-muted">October 9, 2017 12:16</span>
                            </td>
                        </tr> -->
                    </tbody>`);
                });
            }
            jQuery(".js-table-sections-header > tr").on("click.cb.helpers", function (e) {
                if (!("checkbox" === e.target.type || "button" === e.target.type || "a" === e.target.tagName.toLowerCase() || jQuery(e.target).parent("a").length || jQuery(e.target).parent("button").length || jQuery(e.target).parent(".custom-control").length || jQuery(e.target).parent("label").length)) {
                    var a = jQuery(e.currentTarget).parent("tbody");
                    a.hasClass("show") || jQuery("tbody").removeClass("show table-active"),
                        a.toggleClass("show table-active")
                }
            })
        }
    }
});
...