学习
实践
活动
专区
工具
TVP
写文章

工作中一些极其常见的需求(一)

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

工作中,有时候可能老板提个需求,用网页做个简单的数据展示功能,这时候,就需要用到一些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中可以定义函数,传入一些参数,进行调用,极大丰富了表格功能

程序员资源社区

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190118B06P1A00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券