Показывать рекламное изображение после каждой n-й строки в jquery, датируемом с помощью colspan

Question

В моей базе данных 100 строк, длина страницы которых установлена ​​на 10. Я хочу, чтобы объявление показывалось динамически после каждой 6-й строки.На эту позицию рекомендуется не влиять порядок сортировки / разбиение на страницы.

    <table id="example">
       <thead>
          <tr>
             <th>Subject</th>
             <th>By</th>
             <th>Location</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
          </tr>

// if row index = 6 then show advt image by merging columns. I gather colspan is not supported.

          <tr>
             <td colspan="3">show advt</td>
             <td style="display: none;"></td>
          </tr>
       </tbody>
    </table>

Добавление colspan приводит к потере функциональности сортировки и разбиения на страницы.Ниже взломать тоже не работает.

<td style="display: none;"></td>

Если добавить 6-ю дочернюю строку;он теряется во время сортировки.

Answer 1

Вы можете выбрать каждую 6-ю, 12-ю, 18-ю строку, выполнив поиск tr:nth-child(6n).

. Вы можете использовать jQuery after() для вставки содержимого.Вместе вы использовали бы его следующим образом:

$('tr:nth-child(6n)').after('<div>ad</div>');

Вот пример https://jsfiddle.net/zoa5fkga/

Я не уверен, как это повлияет на вашу нумерацию страниц, но, возможно, вы можете изменить настройки вашей нумерации страницдля размещения рекламы или только для инициализации нумерации страниц после размещения рекламы?