模板代码:

<!-- 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>

[HTML表格]在databases显示行的附加信息的更多相关文章

  1. DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  2. vc6.0如何显示行号以及出现版本不兼容问题

    有时编译时,提示某某行有错,但是要定位到某一行的话,如果在编辑页面能够将行号显示出来,查找也就更方便了,下面我来介绍一下让VC6.0显示行号的方法.   工具/原料   VC6.0.显示行号的插件 方 ...

  3. VC++6.0 显示行号

    通过VC6LineNumberAddin能够解决这个问题,方法如下. 一.下载该文件. 网上很多免费的. 二.使用方法:            [1]:打开VC++6.0,点击菜单“工具(Tools) ...

  4. css3 之表格隔行分色显示

    <html> <head> <title></title> <style type="text/css"> table{ ...

  5. gridcontrol显示行号,总行,打印,导出Excel,设置标头及内容居中方法

    1.一般为了表格显示数据更直观,经常会显示行号以及总数.让gridcontrol显示行号,首先你需要设置一下显示行号的宽度,也就是IndicatorWith.默认值为-1,可根据实际数值需要设置宽度, ...

  6. （转）用JS实现表格中隔行显示不同颜色

    用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression(     this.bgColor=((this.rowIndex)%2==0 )? ...

  7. 文本编辑器vim——三种模式、显示行号、插入命令、行快速定位、行内定位

    1.vim的三种工作模式: (1)利用vim命令新建文件: 点击entre键执行命令后,开始向文本中输入想要写入的内容: (2)命令行模式(ESC): 不管用户处于何种模式,只要单击Esc键,即可进入 ...

  8. Word：表格无法分页显示

    造冰箱的大熊猫@cnblogs 2019/1/30 今天遇到一个Word中表格无法分页显示的问题,特记录下来以备后查 我们知道,在Word中将表格不设置为“允许跨页断行”,假设表格中第二行某个单元格的 ...

  9. Bootstrap-table 显示行号

    趁热打铁,使用bootstrap-table时,想要显示每行的行号,再网上查了查,网上给的显示行号的大部分方法,只要一翻页,行号就会又从1开始计算, 也许没有碰到想要的,自己试着解决了这个问题,本人初 ...

随机推荐

  1. iOS页面间传值的一些方式总结

    废话不多说,直接进入主题: 这里要说的方式有6种:1.属性传值 2.block 3.delegate 4.UserDefault 5.单例 6.通知(篇幅原因我只写核心代码,如果看不懂可以直接在最下面 ...

  2. Javascript 接口模拟

    Javascript接口模拟可以通过三种方式实现文档手段(注释).辅助类和鸭式辨. 第一种和第二种只形式上体现没有真正的实现. 鸭式辨实现原理是:"只要能像鸭子一样叫和走就是鸭子" ...

  3. ASP.NET MVC动作过滤器

    ASP.NET MVC提供了4种不同的动作过滤器(Aciton Filter). 1.Authorization Filter 在执行任何Filter或Action之前被执行,用于身份验证 2.Act ...

  4. 关系数据库SQL之可编程性事务

    前言 前面关系数据库SQL之可编程性函数(用户自定义函数)一文提到关系型数据库提供了可编程性的函数.存储过程.事务.触发器及游标,前文已介绍了函数.存储过程,本文来介绍一下事务的使用.(还是以前面的银 ...

  5. 引用Microsoft.Office.Interop.Excel出现的问题

    引用Microsoft.Office.Interop.Excel出现的问题   转自:http://www.hccar.com/Content,2008,6,11,75.aspx,作者:方继祥 操作背 ...

  6. eclipse报错：Failed to load the JNI shared library

    Eclipse运行时提示“Failed to load the JNI shared library /Java/jre6/bin/client/jvm.dll”的一个解决方案 因为 Eclipse ...

  7. PHP学习资料下载

    yii2教程以及手册 https://yunpan.cn/ckkhbccyqGVYg (提取码:09b8) mysql学习 链接: http://pan.baidu.com/s/1kUTC8tT 密码 ...

  8. jQuery对表单、表格的操作及更多应用

    <head> <style type="text/css"> .even {     background-color: #fff38f;/*偶数行样式*/ ...

  9. 走进SVG

    什么是SVG?也许现在很多人都听说过SVG的人比较多,但不一定了解什么是SVG:SVG(Scalable Vector Graphics 一大串看不懂的英文)可伸缩矢量图形,它是用XML格式来定义用于 ...

  10. C#通过WMI的wind32 的API函数实现msinfo32的本地和远程计算机的系统日志查看功能

    先不说如何实现,先来看看效果图: 读取远程的需要提供下远程的计算用户名和密码即可. 如何实现这个代码功能,请看如下代码部分: 实体类: using System; using System.Colle ...