工作中一些极其常见的需求（一）

将数据以表格形式展示网页

工作中，有时候可能老板提个需求，用网页做个简单的数据展示功能，这时候，就需要用到一些web框架和前端知识来解决，这里web后端不是我们的重点，你用Python 的Django框架也好，用Flask框架也好，或者其他语言的后端程序也行，你只需要返回前端表格需要的数据结构即可

比如看下图，这是我用DataTable表格框架，通过简单构造的数据，在网页展现的表格，基本能满足最常见的数据页面展示和分页功能，当然具体表格框架的功能比展示的功能强大的多，下面简单介绍该表格框架的基本用法

1、前端DataTable表格框架

说到前端框架，我一直很建议不管是做爬虫，还是做数据分析，还是其他方面，如果工作不涉及web方面的知识，最好自己也能会一种web框架，不一定让你很精通，但是你要知道其工作原理，能够搭建简单的web界面，因为工作时不时的就会有需求，让做web方面的一些东西，尤其是中小型公司那些招一个人还想让你什么都会，这样一方面也是对自己能力的提高，增加就业竞争力，另一方面，web应用五花八门，我们所做的爬虫、数据分析，机器学习深度学习，很多情况下我们的东西是要展现给前端用户来看，了解熟悉web机制，将会极大补充你的知识体系，甚至像很多js反爬，如果不懂这些前端知识，去处理反爬也是头大，所以不管从哪个方面来说，掌握一门后端web框架和前端知识都是很有必要的。

用DataTable表格框架，该框架是基于JQuery的一款表格框架

引入文件我这里用了2个css，3个js，分别是

因为表格基于jquery，必须引入jquery.js，其他的涉及bootstrap的架包是因为为了让界面更加美观，引入这5个文件，做表格页面显示样式上基本不会出问题

2、数据格式[{},{},{}.....]

数据格式还是简单构造成我们常见的数据类型，表格列名分别为【姓名，年龄，城市】，Python中的说法是列表嵌套字典结构，但是在前端这种说法不对，明白意思即可。表格框架支持的数据也支持其他类型的数据结构，具体可以看API，如果数据是由后端返回的话，在返回的时候在后端构造成此类数据形式返回前端

3、HTML布局

Html中主要就是构造table盒子，class都是控制样式的部分为构造表头第一行的列名字，我这里表头按照数据已知固定来处理，直接写死了，如果数据具有不确定性也就是我们不知道每列是什么名字，可以通过后端返回数据根据js写几行代码动态构造表头

3、CSS样式

Css部分没什么可说的，我就简单让表头底色换了一个蓝色底色，表头文字变成白色，并且让表头和表格内容文字居中显示

4、Js部分

Js代码也没多少行，除去刚才我们构造的data数据，剩下的就是表格展示代码,可以看到基本的展示很简单，

$('#table_id_example').DataTable({})封装的很整洁，一些基本的展示都是通过简单配置即可实现

配置：

“bSort”：false 禁止排序

"data":data 配置数据

"columns": 配置列数据

[{"data":"name"}{ "data": 'age' },{ "data": 'city' }]

最后，我们浏览器打开html即可像文章开头那样显示成功

上面所说的是我们在html中将表头写死的情况，如果在html中我们不将表头写死，而是随着后端返回的数据变化，表头也随之变化，也把代码奉上

1、HTML中tr标签里面的th都已经删除

2、Js中构造了一个colums，这个数组可以由后端返回表头列表，然后遍历，将th写入tr标签中

下方也成功显示

最后介绍一些简单的配置

下方是最近做的Python学习网站用到的一些配置，可以参考，值得一提的是，有时候我们需要操作我们表格中的数据，绑定一些事件，DataTable框架也给我们提供了很方便的方法，下面方法中用到render，在render中可以定义函数，传入一些参数，进行调用，极大丰富了表格功能

程序员资源社区

下方公众号回复：表格，即可领取表格展示源码