boostrap-table使用技巧之序列号递增及数字格式化

 1、序列号递增 

在生成表格时，往往需要在表格的第一列加上序号，并且能够翻页之后，继续上一页的序号。

• 代码如下（由于序号没有对应的字段，故field填''或null）：

columns: [
    {
        title: '序号',
        field: '',
        align: 'center',
        formatter: function (value, row, index) {
            var pageSize = $('#table的id').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
            var pageNumber = $('#table的id').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
            return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
        }
    },
    {
        .....
    }
}

• 效果图如下： 

 

 2、数字格式化 

列表中，往往有计算总金额的字段，但是众所周知，计算结果明明是整数，显示出来的却成了小数（且小数点后面跟了十几位数字），因此，将数字进行格式化成了必须做的事。

不过，在boostrap-table中数字字段格式化也是一件比较容易的事。在columns里对要进行格式化的列中增加formatter属性，并且重写formatter函数，将数字转成成我们想要的格式即可。

• 代码如下（数字格式化，保留两位小数）：

columns: [
    {
            title: '总金额',//表的列名
            field: 'toAmount',//json数据中rows数组中的属性名
            align: 'center',//水平居中
            formatter: function (value, row, index) {
           		return Math.round(value*100)/100
           }
        },
    {
        .....
    }
}

• 格式化前： 

• 格式化后：