模板代码:
<!-- 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>