how do I replace the text "rows" in pagination - bootstrap-table

Question

In the pagination example, how do I replace the text at the bottom, "rows" with another word e.g. "products"?
Showing 1 to 10 of 800 rows
becomes
Showing 1 to 10 of 800 products
Ported from issue # 882 on bootstrap-table's issue tracker.

Answer 1

This text is part of bootstrap-table's localizations. English (en-US) is loaded by default.
Solution # 1
Create and include a custom locale
/js/locale/bootstrap-table-en-US-custom.js
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['en-US-custom'] = {
formatLoadingMessage: function () {
return 'Hold your horses...';
},
formatRecordsPerPage: function (pageNumber) {
return pageNumber + ' bananas per page';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' products';
},
formatSearch: function () {
return 'Search';
},
formatNoMatches: function () {
return 'No matching records found';
},
formatPaginationSwitch: function () {
return 'Hide/Show pagination';
},
formatRefresh: function () {
return 'Refresh';
},
formatToggle: function () {
return 'Toggle';
},
formatColumns: function () {
return 'Columns';
},
formatAllRows: function () {
return 'All';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US-custom']);
})(jQuery);
It is also important to note, that the localization settings get merged in to the table settings -meaning that you can simply
Solution # 2 Pass them as an argument in your table settings:
$('#table').bootstrapTable({
// .. your other table settings
pagination: true,
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' rows';
}
});

Answer 2

or you can
var $table = $('#bootstrap-table');
$table.bootstrapTable({
toolbar: ".toolbar",
clickToSelect: true,
showRefresh: true,
search: true,
showToggle: true,
showColumns: true,
pagination: true,
searchAlign: 'left',
pageSize: 8,
clickToSelect: false,
pageList: [8,10,25,50,100],
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
formatShowingRows: function(pageFrom, pageTo, totalRows){
//do nothing here, we don't want to show the text "showing x of y from..."
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' ';
}
});

Answer 3

based on jtrumbull`s totally correct answer, I would spent a third one:
Solution # 3 use a locale and merge / overwrite parts of them with your own:
in this example, we will overwrite the already defined "formatShowingRows" function.
// create an array where you store your own translations
var mylocale = {
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Ergebnisse <b>' + pageFrom + '-' + pageTo + '</b> von <b>' + totalRows + '</b>';
}
}
// extend the used locale
$.extend(true, $.fn.bootstrapTable.locales.de, mylocale);