（一）需求分析&技术实现
（二）初步搭建Django环境
（三）页面布局&Django模板
（四）SQL+Pandas初步处理数据
（五）前端表单交互
（六）Ajax异步传参与加载
（七）前端数据格式的处理
（八）DataTables接管前端表格
（九）Pyecharts实现交互图表
（十）静态图表的展示
（十一）“导出数据至Excel”功能
（十二）添加和配置缓存
（十三）用户登录系统
（十四）部署Django至生产环境
我一直认为表格是数据分析可视化的最重要形式，是整个项目最终成果的重中之重，因此放到交互图表之前来说。分析人员应该把制造酷炫的dashboard的激情分一点到表格上来，而呈现一个好的表格实际是一个非常综合且细节的用户体验管理，既要呈现美观醒目的结果，又要包含丰富实用的功能。
一个优秀的表格解决方案绝对不是个人就能搞定的小工程。因此，本章尝试用jQuery的DataTables插件接管前端表格，DataTables可能不是最后呈现效果最好的方案，甚至有些过时。但是胜在高度灵活，功能完善，社区活跃，基本上你想到的都能实现。本章的内容也会主要聚焦在一些细节的雕琢上，争取用最简单的方式获取尽可能佳的用户体验。
DataTables恰巧有我们Semantic UI的主题，那我们就使用它使整体风格更统一。在DataTables官网下载时记得要勾选，下载下来的css才会是Semantic UI主题的：
在第3章的base.html模板里，下面的引用部分都是和DataTables相关的。我们多下了一个百分比条形图插件percentageBars，接下来会用到：
<!-- DataTables初始化的方式非常灵活多变，主要差别在于：
- 数据源是DOM，AJAX json, js还是server-side processing
- 分页是在前端还是服务器端
- 初始化的设置是全部js执行还是html里指定列title的方式
我的建议当然还是根据应用场景因地制宜，本次项目我们之前的操作都是通过Pandas的.to_html()方法传一整个DOM表格（如果用drf做api则DataTabels初始化方法会完全不同）。一般分析的结果也不会有很多行不需要服务器端分页（但在表格条目特别多的场景服务器端分页然后异步加载则异常重要）。
总之，我们最后选择使用数据源为DOM，前端分页，JS设置的方法。
首先，在前两章的table.to_html()方法里多声明2个参数，给AJAX传的DOM表格指定一个css class和id：
def 上方代码中的classes='ui selectable celled table'即为Semantic UI的表格样式，可以参考下方页面选择自己喜欢的各种变种：
https://semantic-ui.com/collections/table.htmlsemantic-ui.com
在filter.html里的js部分加入一个initTable方法，调用DataTables的默认初始化语句：
<再在第六章AJAX回传的success参数里根据后端新指定的id “ptable”指定表格元素并call这个initTable方法就可以了：
<（注意上方代码块中的连续两行的两个'ptable'是完全不同的，第一行的'ptable'是视图端传来的context字典的键值，而第二行的'ptable'是我们刚刚设定的表的id。）
此时可以在前端测试下，查询后表格的呈现已经发生变化了，外观改变之余也多了前端分页，搜索筛选，排序等新功能：
但整体效果和各种细节依然肉眼可见的不完善，我们还有以下诉求：
- 表格整体宽度与父元素一致且保持不变
- 默认以第2列（销售额）由高到低排序
- 默认前端分页设置为每页呈现25个结果
- 所有UI的label本地化为中文显示
- 表格内所有负数高亮为红色字体
- 第7列（EI）是个描述增速是否跑赢大盘的指标，要求高于100的数值高亮绿色字体，低于100的数值高亮为红色字体
- 第4列（份额）用条形图展示，增加醒目感
- 增加一个按键一键复制表格，方便粘贴到Excel或其他地方，这是一个常用需求，用鼠标划选麻烦且容易错位。
前4个问题是DataTables的基本设置就可以搞定的，可以修改initTable方法。DataTables的基本设置已经足以实现很多实用功能了，具体请参考文档：
<5,6是个常见的条件格式问题，要用设置里的columnDefs参数解决，具体使用时主要涉及target和createdCell两个参数：
<把份额列以条形图展示的方法来自一个叫percentageBars的插件，插件的初始化也是在columnDef参数里进行的：
<一键复制表格的功能我没有找到DataTables的内置方法，在display.html自行编写js配合前端按钮解决，注意html部分的ui top attached button和下面两个新的js：
...
一个用户体验非常完善的表格就完成了：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
