Как добавить div между кнопками dataTable? - PullRequest
Новая
       12

Как добавить div между кнопками dataTable?

0 голосов
/ 28 апреля 2020

Можно ли добавить div или span между кнопками?

В данный момент структура, отображаемая в HTML: 

<div class="dt-buttons">         
    <button class="dt-button buttons-copy buttons-html5 btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Copy to clipboard</span></button>
    <button class="dt-button buttons-excel buttons-html5 btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Export as Excel</span></button>
    <button class="dt-button buttons-csv buttons-html5 btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Export as CSV</span></button>
    <button class="dt-button buttons-pdf buttons-html5 btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Export as PDF</span></button>
    <button class="dt-button buttons-print btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Print</span></button>
</div>

Желаемый результат: 

<div class="dt-buttons">         
    <button class="dt-button buttons-copy buttons-html5 btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Copy to clipboard</span></button>
    <span class="dot"></span>
    <button class="dt-button buttons-excel buttons-html5 btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Export as Excel</span></button>
    <span class="dot"></span>
    <button class="dt-button buttons-csv buttons-html5 btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Export as CSV</span></button>
    <span class="dot"></span>
    <button class="dt-button buttons-pdf buttons-html5 btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Export as PDF</span></button>
    <span class="dot"></span>
    <button class="dt-button buttons-print btn btn-export" tabindex="0" aria-controls="data-table" type="button"><span>Print</span></button>
</div>

1 Ответ

1 голос
/ 28 апреля 2020

Вы можете сделать это, используя :not(:last), чтобы выбрать все кнопки, кроме последней, и after(): 

 $(".dt-buttons button:not(:last)").after("<span class'dot'>");
...