wenzhixin / bootstrap-table

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
https://bootstrap-table.com/
MIT License
11.73k stars 4.44k forks source link

Trying to set color only last row #3755

Closed keremcankabadayi closed 5 years ago

keremcankabadayi commented 6 years ago

Hey!

I'm trying to rowStyle for only last row. My datas are changeable. Generally, total number of rows are between 3-50. I want to change the last row color every table.

These are my steps and codes

<table id="ayrintili_gelir" data-toggle="table" data-url="ayrintili_gelir.php" data-classes="table table-hover" data-striped="true"
            data-pagination="false" data-page-list=[20, 40, 75, 100] data-search="true"data-row-style="rowStyle">
            <thead>
                <tr>
                    <th data-sortable="true" data-field="tarih" data-align="right">Tarih</th>
                    <th data-sortable="true" data-field="hasilat" data-align="right">Hasılat</th>
                    <th data-sortable="true" data-field="visa" data-align="right">Visa</th>
                    <th data-sortable="true" data-field="butce_ici" data-align="right">Bütçe içi</th>
                    <th data-sortable="true" data-field="hisse_satis" data-align="right">Hisse Satış</th>
                    <th data-sortable="true" data-field="sosyal_konut" data-align="right">Sosyal Konut</th>
                    <th data-sortable="true" data-field="elektrik" data-align="right">Elektrik</th>
                    <th data-sortable="true" data-field="haberlesme" data-align="right">Haberleşme</th>
                    <th data-sortable="true" data-field="iller_bank" data-align="right">İller Bankası</th>
                    <th data-sortable="true" data-field="diger" data-align="right">Diğer</th>
                    <th data-sortable="true" data-field="Toplam" data-align="right">Toplam</th>

                </tr>

            </thead>
</table>

I tried to getTotalRow with this

$("#ayrintili_gelir").on('load-success.bs.table', function (e, data) {
            var ToplamSatir = Object.keys(data).length;
            console.log(ToplamSatir);
            }); 

ToplamSatir returns totalrow number correctly. But I can't use this number inside rowStyle I know rowStyle is iterative function.

function rowStyle(row, index) {

        var classes = ['info'];
        if (index % 3 === 0) { // can't use `ToptamSatir`
            return {
                classes: classes[0]
            };
        }
        return {};
}

with index % 3

screenshot at apr 22 09-20-01

If JSFiddle is needed, i can provide. Any suggestion? Thanks in advance!

jimgit commented 6 years ago

Is there a unique value or id in the table? If so, you can use the events to trigger a call your logic and a rowstyle function. Include a fiddle of some sample.

wenzhixin commented 5 years ago

Use this.data.length to solve the problem:

function rowStyle(row, index) {
    console.log(this.data.length)
}