[HTML表格]在databases显示行的附加信息

模板代码:
<!-- DataTables CSS -->
    <link rel="stylesheet" href="{% static 'DataTables/css/jquery.dataTables.css' %}">
    <!-- jquery -->
    <script src="{% static 'js/jquery/jquery.min.js' %}"></script>
    <!-- DataTables -->
    <script src="{% static 'DataTables/js/jquery.dataTables.js' %}"></script>
    <script>
    function format () {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
    }
    $(document).ready(function(){
         var table = $('#t1').DataTable({
              language: {//国际化
              "sProcessing": "处理中...",
              "sLengthMenu": "显示 _MENU_ 项结果",
              "sZeroRecords": "没有匹配结果",
              "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
              "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
              "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
              "sInfoPostFix": "",
              "sSearch": "搜索:",
              "sUrl": "",
              "sEmptyTable": "表中数据为空",
              "sLoadingRecords": "载入中...",
              "sInfoThousands": ",",
              "oPaginate": {
                  "sFirst": "首页",
                  "sPrevious": "上页",
                  "sNext": "下页",
                  "sLast": "末页"
              },
              "oAria": {
                  "sSortAscending": ": 以升序排列此列",
                  "sSortDescending": ": 以降序排列此列"
              }
          }
            });
    $('#t1_body').on('click', 'td.test', function () {
            var tr = $(this).closest('tr');
        var row = table.row( tr );
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format()).show();
            tr.addClass('shown');
        }
    });
 })
    </script>
</head>
<body>
                                     <table border="1" id="t1">
                            <thead id="t1_head">
                                <tr>
                            <th>合同编码</th><th>合同名称</th><th>客户名称</th><th>签订日期</th><th>生效时间</th><th>失效时间</th><th>状态</th><th>年限</th><th>类型</th><th>经办人</th><th>新增/续签</th><th>原合同编码</th><th>佣金发放</th>
                          </tr>
                            </thead>
                             <tbody id="t1_body">
                                 {% for data in bill_data %}
                                 <tr>
                                   <td class="test">{{ data.contract_code }}</td>
                                   <td>{{ data.contract_name }}</td>
                                   <td>{{ data.cust_name }}</td>
                                   <td>{{ data.con_sign_date }}</td>
                                   <td>{{ data.con_eff_date }}</td>
                                   <td>{{ data.con_exp_date }}</td>
                                   <td>{{ data.con_state }}</td>
                                   <td>{{ data.con_age }}</td>
                                   <td>{{ data.con_type }}</td>
                                   <td>{{ data.con_agent }}</td>
                                   <td>{{ data.new_flag }}</td>
                                   <td>{{ data.original_code }}</td>
                                   <td>{{ data.payment }}</td>
                                  </tr>
                                 {% endfor %}
                             </tbody>
                             <tfoot id="t1_foot">
                             
                             </tfoot>
                       </table>