欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-11 11:29:37
...
模板代码:

    link rel="stylesheet" href="{% static 'DataTables/css/jquery.dataTables.css' %}">
    
    script src="{% static 'js/jquery/jquery.min.js' %}">script>
    
    script src="{% static 'DataTables/js/jquery.dataTables.js' %}">script>
    script>
    function format () {
    return ''+''+''+''+''+''+''+''+''+''+''+'
Full name:
Extension number:
Extra info: And any further details here (images etc)...
'; } $(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>