九.引入datatables插件

在ACE中，我们引入datatables插件，这是一款展示表格，并通过js来实现个包括展示、分页、排序等各种表格功能的插件，而且是高度可定制化的一款插件。官方网站为：http://www.datatables.net/。当然，在我们的ACE模板中也有包含，并加入了ACE的CSS元素。

 

1.      修改index.html页面，在其中增加block元素，用于存放不同页面的主页内容

<div class="page-content">
   <div class="page-content-area">
                    <div class="page-header">
                            <h1>
                                <!--设置导航栏的页面标题-->
                                {% block page_title %}
                                {% endblock %}
                                <small>
                                    <i class="ace-icon fa fa-angle-double-right"></i>
                                     <!--设置导航栏的页面子标题-->
                                    {{ sub_title }}
                                </small>
                            </h1>
                        </div><!-- /.page-header -->
      <div class="row">
         <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
				<!--设置页面内容-->
                            {% block container %}
                            {% endblock %}
            <!-- PAGE CONTENT ENDS -->
         </div><!-- /.col -->
      </div><!-- /.row -->
   </div><!-- /.page-content-area -->
</div><!-- /.page-content -->

2.      node_list.html用于存放机构信息，line_list.html用于存放线路信息，device_list.html用于存放设备信息，同时修改index.html中Table下的链接，将其中的链接指向node_list.html,line_list.html,device_list.html:

<ul class="submenu">
   <li class="">
      <a href="{% url 'lists' table='node' %}">
         <i class="menu-icon fa fa-caret-right"></i>
         节点信息
      </a>
      <b class="arrow"></b>
   </li>
   <li class="">
      <a href="{% url 'lists' table='line' %}">
         <i class="menu-icon fa fa-caret-right"></i>
         线路信息
      </a>
      <b class="arrow"></b>
   </li>
          <li class="">
      <a href="{% url 'lists' table='device' %}">
         <i class="menu-icon fa fa-caret-right"></i>
         设备信息
      </a>
      <b class="arrow"></b>
   </li>
</ul>

3.      建立res_list.html，用来存放资源类表格，并把它作为一个模板，供其他页面继承，这样可以节省大量的重复代码。

<!--继承index.html-->
{% extends "index.html" %}
{% block page_css %}
{% endblock %}
<!--填充导航栏的页面名称-->
{% block page_title %}
    基础资料
{% endblock %}
<!--放置主页面内容-->
{% block container %}
    {% load staticfiles %}
    <div class="row">
        <!-- Search Page BEGINS-->
        <div class="col-xs-12">
            <form class="navbar-for navbar-container" role="search" method="get" action="">{% csrf_token %}
                <!--放置搜索栏内容-->
                {% block search %}
                {% endblock %}
                <div class="col-sm-3">
                        <span class="input-group-btn">
                           <button type="submit" class="btn btn-purple btn-sm">
                                        查询
                                        <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                                    </button>
                        </span>
                </div>
            </form>
        </div>
        <!-- Search Page END -->
        <!-- PAGE TABLES BEGINS -->
        <div class="col-xs-12">
            <div>
                <table id="table_id" class="table table-striped table-bordered table-hover">
                    <thead>
                    <!--表格头部-->
                    {% block table_tr %}
                    {% endblock %}
                    <th>
                        <!--最后一列作为添加数据按钮-->
                        <a class="blue" href="{% url 'add' table=table %}">
                            <i class="ace-icon fa fa-search-plus bigger-130"></i>
                            添加数据
                        </a>
                    </th>
                    </thead>
                   <!--表格内容-->
                    <tbody>
                    {% for item in data %}
                        <tr>
                            <!--通过for循环从data取出的具体表格内容-->
                            {% block table_td %}
                            {% endblock %}
                            <td>
                                <!--页面扩展时的按钮布局-->
                                <div class="hidden-sm hidden-xs action-buttons">
                                    <!--编辑信息按钮-->
                                    <a class="green" href="{% url 'edit' table item.id %}" title="编辑信息">
                                        <i class="ace-icon fa fa-pencil bigger-130"></i>
                                    </a>
                                    <!--删除信息按钮-->
                                    <a class="red" href="{% url 'delete' table item.id %}" title="删除信息">
                                        <i class="ace-icon fa fa-trash-o bigger-130"></i>
                                    </a>
                                </div>
                                <!--页面收缩时的按钮布局-->
                                <div class="hidden-md hidden-lg">
                                    <div class="inline position-relative">
                                        <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown"
                                                data-position="auto">
                                            <i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>

                                        </button>


                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                            <li>
                                                <a href="{% url 'add' table=table %}" class="tooltip-info" data-rel="tooltip" title="添加数据">
                                                            <span class="blue">
                                                               <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                                            </span>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="{% url 'edit' table item.id %}" class="tooltip-success" data-rel="tooltip" title="修改信息">
                                                            <span class="green">
                                                               <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                                            </span>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="{% url 'delete' table item.id %}" class="tooltip-error" data-rel="tooltip" title="删除信息">
                                                            <span class="red">
                                                               <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                            </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}
{% block page_javascript %}
    <!--datatable的专用js-->
    <script type="text/javascript">
        $(document).ready(function () {
            $('#table_id').DataTable({
                //分页配置
                "paging": false,
                //搜索配置
                "searching": false,
                "bInfo": false,
                //列配置
                "columnDefs": [{
                    //只有最后一行不需要排序
                    "orderable": false, "targets": -1
                }]
            });
        });
    </script>

{% endblock %}

4.      node_list.html，line_list.html,device_list.html继承res_list.html，并将各自不一样的内容在相应的block中进行填充

node_list.html:

{% extends "res_list.html" %}
{% block search %}
{% endblock %}

{% block table_tr %}

<th>机构名称</th>
<th>机构分类</th>
<th>成本中心</th>
<th>机构地址</th>
<th>联系人</th>


{% endblock %}
{% block table_td %}
<td>{{item.node_name}}</td>
<td>{{item.node_type}}</td>
<td>{{item.node_cost}}</td>
<td>{{item.node_address}}</td>
<td>{{item.node_contact}}</td>

{% endblock %}

line_list.html:

{% extends "res_list.html" %}
{% block search %}
{% endblock %}

{% block table_tr %}
    <th>线路编号</th>
   <th>用户名称</th>
   <th>本端地址</th>
   <th>对端地址</th>
   <th>运营商</th>
   <th>线路类型</th>
   <th>线路速率</th>
   <th>线路参数</th>
   <th>所在总头</th>

{% endblock %}
{% block table_td %}
    <td>{{item.line_code}}</td>
   <td>{{item.node}}</td>
   <td>{{item.line_para1}}</td>
   <td>{{item.line_para2}}</td>
   <td>{{item.line_local}}</td>
   <td>{{item.line_speed}}</td>
   <td>{{item.line_speed}}</td>
   <td>{{item.para2}}</td>
   <td>{{item.para2}}</td>
{% endblock %}

device_list.html:

{% extends "res_list.html" %}
{% block search %}
{% endblock %}

{% block table_tr %}

<th>设备名称</th>
<th>主机名称</th>
<th>管理地址</th>
<th>使用部门</th>
<th>设备型号</th>
<th>设备序列号</th>
<th>登记人</th>


{% endblock %}
{% block table_td %}
<td>{{item.device_caption}}</td>
<td>{{item.device_sysname}}</td>
<td>{{item.device_ip}}</td>
<td>{{item.node}}</td>
<td>{{item.device_type}}</td>
<td>{{item.device_serial}}</td>
<td>{{item.signer}}</td>

{% endblock %}

5.      修正view中add函数中的context，将table参数传递过去

views.py:

#显示各列表信息
def lists(request, table):
    #从根据不同的请求，来获取相应的数据,并跳转至相应页面
    if table == 'node':
        data = Node.objects.all()
        list_template = 'node_list.html'
        sub_title = '节点信息'
    if table == 'line':
        data = Line.objects.all()
        list_template = 'line_list.html'
        sub_title = '线路信息'
    if table == 'device':
        data = Device.objects.all()
        list_template = 'device_list.html'
        sub_title = '设备信息'
    #建立context字典，将值传递到相应页面
    context = {
        'data': data,
        'table': table,
        'sub_title': sub_title,
    }
    #跳转到相应页面，并将值传递过去
    return render(request,list_template,context)


#用于增加资源
def add(request, table):
    #...
    #创建context来集中处理需要传递到页面的数据
    context = {
        'form': form,
        'table': table,
    }
    #如果没有有效提交，则仍留在原来页面
    return render(request, 'add.html',  context)<strong>
</strong>

6.再次访问 http://127.0.0.1:8000/lists/node/，可以发现已经运用上了ACE模板

其中，添加数据按钮可以正常使用