CMDB-资产总表（十）

当前，我们的资产总表如下图所示，还没有任何数据：

mark

这需要我们从数据库中查询数据，然后渲染到前端页面中。

数据的获取很简单，一句：

assets = models.Asset.objects.all()

就搞定。当然，你也可以设置过滤条件，添加分页等等。

而在前端，我们往往需要以表格的形式，规整、美观、可排序的展示出来。这里推荐一个前端插件 datatables，是一个非常好的表格插件，功能强大、配置简单。

其官网为：https://datatables.net/ 中文网站：http://datatables.club/

在AdminLTE中，集成了datatables插件，无需额外下载和安装，直接引入使用就可以。

下面给出一个完整的index.html模板代码：

index.html
https://github.com/zhangduanya/mycmdb/blob/master/templates/assets/index.html

主要是新增了表格相关的html代码和初始化表格的js代码。

<table id="assets_table" class="table table-bordered table-striped">

id属性非常重要，用于关联相应的初始化js代码。

表格中，循环每一个资产：

• 首先生成一个排序的列；
• 再根据资产类型的不同，用不同的颜色生成不同的资产类型名和子类型名；
• 通过asset.get_asset_type_display的模板语法，拿到资产类型的直观名称，比如‘服务器’，而不是显示呆板的‘server’；
• 通过asset.server.get_sub_asset_type_display，获取资产对应类型的子类型。这是Django特有的模板语法，非常类似其ORM的语法；
• 在资产名的栏目，增加了超级链接，用于显示资产的详细内容。这里只实现了服务器类型资产的详细页面，其它类型请自行完善；
• 根据资产状态的不同，用不同的颜色显示；
• 利用asset.m_time|date:"Y/m/d [H:m:s]"调整时间的显示格式；
• 由于资产和tas标签属于多对多的关系，所以需要一个循环，遍历每个tas并打印其名称；
• 通过asset.tags.all可以获取一个资产对应的多对多字段的全部对象，很类似ORM的做法。

表格的初始化JS代码如下：

<script>
  $(function () {
    $('#assets_table').DataTable({
      "paging": true,       <!-- 允许分页 -->
      "lengthChange": true, <!-- 允许改变每页显示的行数 -->
      "searching": true,    <!-- 允许内容搜索 -->
      "ordering": true,     <!-- 允许排序 -->
      "info": true,         <!-- 显示信息 -->
      "autoWidth": false    <!-- 固定宽度 -->
    });
  });
</script>

其中可定义是否允许分页、改变显示的行数、搜索、排序、显示信息、固定宽度等等，通过表格的id进行关联。

下面，我们通过后台admin界面，多增加几个服务器实例，并修改其类型、业务线、状态、厂商、机房、标签，再刷新资产总表，可以看到效果如下：

mark

试着使用一下排序和搜索功能吧！datatables还是相当强大的！

现在点击资产名称，可以链接到资产详细页面，但没有任何数据显示，在下一节中，我们来实现它。