DataTables 插件

By | 2021年12月31日

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()插件不需要用了。

发表评论

您的电子邮箱地址不会被公开。