Bootstrap-table: Display row number

[berdesos]

Any idea on how to display static incremental row numbers (not ids in json, generally not included in json)? I need to have each table-element's row easily recognisable by a static incremental number. Thanks

[DominikAngerer]

Here is an simple jsfiddle for you: http://jsfiddle.net/DominikAngerer/yx275pyd/2/

Here for you again not as fiddle:

<table data-toggle="table"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/">
    <thead>
    <tr>
        <th data-formatter="runningFormatter">Index</th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

function runningFormatter(value, row, index) {
    return index;
}

All it does it returns the index of the current row as a "formatter"

[DominikAngerer]

Added PullRequest so this can be found in the documentation.

[berdesos]

That's perfect! and this is an adjustment of the function for counting from 1...

function runningFormatter(value, row, index) {
index++; {
return index;
}
}

[DominikAngerer]

i would do that like this:

function runningFormatter(value, row, index) {
    return 1+index;
}

So you don't really update the index - just to be safe ;)

[berdesos]

thats better. thanks

[jorgecarleitao]

Note that this value is not the "rank" of a given row and a given ordering because if you "search" the rows, the first value will be the first after the search, not before the search.

[wenzhixin]

@jorgecarleitao, You can handle your response data, for example:

responseHandler: function (res) {
    $.each(res, function (i, row) {
        row.index = i + 1;
    });
    return res;
}

and then, use in the field: <th data-field="index">.

[zeeshanyshaikh]

How to get index increment on next page as well. If clicked on next page the counter (index) is set to 0.

[wenzhixin]

You can use bootstrapTable('getOptions') to get the page information.

[enayet-repo]

As suggested by wenzhixin, You can use the following -

   this.runningFormatter = function (value, row, index) {
        var tableOptions = $table.bootstrapTable('getOptions');
        return ((tableOptions.pageNumber-1) * tableOptions.pageSize)+(1 + index);
   };

[lio590]

Hi Enayet thx for the snippet however it seems that we can't get the row "id" when we call $table.bootstrapTable('getSelections') any clue on what's happening ?

[jinbatsu]

Hi Enayet thx for the snippet however it seems that we can't get the row "id" when we call $table.bootstrapTable('getSelections') any clue on what's happening ?

just add your table id element before, like this

this.runningFormatter = function (value, row, index) {
        $table = $('#tablegrid'); // your tablegrid id
        var tableOptions = $table.bootstrapTable('getOptions');
        return ((tableOptions.pageNumber-1) * tableOptions.pageSize)+(1 + index);
   };

Notes: this also work for server side pagination.