使用colspan在jquery数据表中的每第n行后显示广告图像

时间:2018-05-20 21:28:01

标签: jquery datatable

我的数据表有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日添加子行;它在分拣时丢失了。

1 个答案:

答案 0 :(得分:0)

您可以通过搜索tr:nth-child(6n)来选择每个第6,12,18行。

您可以使用jQuery的after()来插入内容。你一起使用它如下:

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

以下是https://jsfiddle.net/zoa5fkga/

的示例

我不确定这会如何影响您的分页,但也许您可以调整您的分页设置以适应广告,或者仅在广告插入后初始化分页?