1 弃用 BootstrapTable，改用 DataTables

工作中做一个策略页面，由于比较复杂，当用户选择200条数据时来分页时，渲染超级慢，具体问题出现在下面两个地方。

1.1 table.bootstrapTable(‘removeAll’) 性能问题

如果按200条数据分页，在页面上已有200条数据时，这个 removeAll 方法，会花去3秒多一点的时间，这显然太长了。

1.2 data-formatter 的性能问题

使用 bootstrap-table 的 data-formatter 渲染每个 cell，data-formatter 在 返回的 html 较大时，存在性能问题。例如，当渲染的 html 130 个字符时，如果按200条分页，单个 cell 列需要消耗2秒，三列就是6秒。目前的解决办法：渲染html字符多的几列不使用 data-formatter，当拿到服务器端 json 后，立刻对应新增几个额外的 html 字段供使用。 但 bootstrap-table API 文档上 event 部分仅提供 onLoadSuccess，一旦此方法被触发，页面也就渲染完成了，因此，这种方式对于这个控件来说，没有处理入口。改用 jquery的 DataTables，因为它提供底层的 xhr 事件，简单替换后，200条数据3秒左右就出来。

另外，经测试，onLoadSuccess 方法一旦触发，页面上html也同时出现，即 data-formatter 已经执行完成了。

2 Ajax请求后台抛异常时的友好处理

AJAX请求后台数据时，一旦后台出现异常，DataTables会一直显示“处理中…”。为了能给用户更好的体验，需要处理下，这里我们要用到 DataTables的“API plug-ins”，这里我们选择其中的 processing() 插件。

Example：

// Show a processing indicator for two seconds on initialisation
var table = $('#example').DataTable( {
  processing: true
} );
table.processing( true );
 
setTimeout( function () {
  table.processing( false );
}, 2000 );

效果：

注：Ajax加载数据过程中，会自动多个“载入中…”，如上图所示，如果服务器报错，返回的数据格式不是 data 包裹的，那么就会一直显示在页面上，如果能解决这个问题，那么processing()插件不需要用了。