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