table页面之数据展示功能实现——我的第一个网站(4)

前言、页面table实现效果

先上个效果图：

 

网站已经部署到服务器上，点击连接观看效果：http://47.102.119.31:5000/MemberList_Dynamic/index

完整网站源码已经上传到github上，点击连接下载源码：https://github.com/yangwohenmai/WebConsole/tree/master/myConsole/WebConsole

有技术问题可以添加QQ群问我，群号：970015252，群里有众多小伙伴在一起推进 Java  C#  PHP 等版本网站的同时开发。欢迎一起加入。

一、在页面显示table的常用方法

向table页面中添加数据，然后在网页上展示出来，本人常用的有以下三种方法：

• 在后台获取数据，然后在后台拼接好HTML字符串，传到前台直接渲染展示。这种方法个人感觉是最丑的方法。
• 在后台获取数据，用ajax等技术将数据传到前端，在前端用js或其他语言对数据处理后，用循环输出table中的 标签的方式将数据显示出来。个人感觉这种方式是最灵活的方式，但也有弊端，当表格结构复杂，或者功能复杂的时候，就要写大量的js方法对表格进行操作，导致前端代码混乱。
• 在后台获取数据，用ajax等技术将数据传到前端，在前端直接调用UI框架，显示表格。这种方式是相对较优的方式，但要求大家要学会一些前端框架，这就需要一些额外的工作量。

 

二、技术实现

在本文我主要向大家介绍后两种实现方法。

 

1.用javascript在前端动态画table的方法：

之前我有一篇文章详细的介绍过了，文中带有代码实现原理，可以直接去看。这是相当好的一篇关于table的文章。传送门如下：Ajax动态局部刷新table表格内容——精简jQuery代码示例

 

2.用LayUI框架显示一个table的方法：

LayUI是一个很优秀的前端框架，前文已经有过相对详细的介绍。从上面的效果图中可以看出来，网站页面的设计风格扁平化，布局美观，页面中的table功能就是LayUI框架自带的插件。

table中包括增删改查功能，table的单元格内可以设置各种样式，可以显示文本，图标，复选框以及一些其他自定义的复杂样式。table插件带有分页功能，跳转功能，打印功能，输出csv，excel等。可以说是相当全面了。

下面我们就来看一看怎么使用LayUI实现的table功能。

（1）首先写一个table标签占位，后续整个表格都会填充在这个table标签的位置上，注意标签里有一个id="demo1"，后续的样式会通过这个id来定位table的位置。如果页面上有多个table的话，每个table的id定义成不同的名称。

（2）定义好了table占位符，就可以开始定义table的样子了。

实现代码如下，每个参数的意思我已经注释了，有不明白的可以加文中提到的QQ群，一起来讨论。

通过下面的js代码，就可以在第一部table标签的位置，画出一个表格。

三、实现功能源码

本网站我是用mvc架构写的，所以分为Controller ， Model， View三部分，三部分github源码地址如下：

Controller：https://github.com/yangwohenmai/WebConsole/blob/master/myConsole/WebConsole/WebConsole/Controllers/MemberList_DynamicController.cs

Model：https://github.com/yangwohenmai/WebConsole/blob/master/myConsole/WebConsole/WebConsole/Models/MemberList_DynamicViewModel.cs

View：https://github.com/yangwohenmai/WebConsole/blob/master/myConsole/WebConsole/WebConsole/Views/MemberList_Dynamic/Index.cshtml

四、相关文章：

0.ASP.NET Core MVC 入门——新手搭建第一个网站框架

1.开题——我的第一个网站(1)

2.搭建一个网站框架——我的第一个网站(2)

3.table页面的功能的设计与实现——我的第一个网站(3)