你的位置:首页 > 网页设计

[网页设计][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" >'+    '<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>