模板代码:

  1. <!-- DataTables CSS -->
  2.     <link rel="stylesheet" href="{% static 'DataTables/css/jquery.dataTables.css' %}">
  3.     <!-- jquery -->
  4.     <script src="{% static 'js/jquery/jquery.min.js' %}"></script>
  5.     <!-- DataTables -->
  6.     <script src="{% static 'DataTables/js/jquery.dataTables.js' %}"></script>
  7.     <script>
  8.     function format () {
  9.     return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
  10.         '<tr>'+
  11.             '<td>Full name:</td>'+
  12.         '</tr>'+
  13.         '<tr>'+
  14.             '<td>Extension number:</td>'+
  15.         '</tr>'+
  16.         '<tr>'+
  17.             '<td>Extra info:</td>'+
  18.             '<td>And any further details here (images etc)...</td>'+
  19.         '</tr>'+
  20.     '</table>';
  21.     }
  22.     $(document).ready(function(){
  23.          var table = $('#t1').DataTable({
  24.               language: {//国际化
  25.               "sProcessing": "处理中...",
  26.               "sLengthMenu": "显示 _MENU_ 项结果",
  27.               "sZeroRecords": "没有匹配结果",
  28.               "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
  29.               "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
  30.               "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
  31.               "sInfoPostFix": "",
  32.               "sSearch": "搜索:",
  33.               "sUrl": "",
  34.               "sEmptyTable": "表中数据为空",
  35.               "sLoadingRecords": "载入中...",
  36.               "sInfoThousands": ",",
  37.               "oPaginate": {
  38.                   "sFirst": "首页",
  39.                   "sPrevious": "上页",
  40.                   "sNext": "下页",
  41.                   "sLast": "末页"
  42.               },
  43.               "oAria": {
  44.                   "sSortAscending": ": 以升序排列此列",
  45.                   "sSortDescending": ": 以降序排列此列"
  46.               }
  47.           }
  48.             });
  49.     $('#t1_body').on('click', 'td.test', function () {
  50.             var tr = $(this).closest('tr');
  51.         var row = table.row( tr );
  52.         if ( row.child.isShown() ) {
  53.             // This row is already open - close it
  54.             row.child.hide();
  55.             tr.removeClass('shown');
  56.         }
  57.         else {
  58.             // Open this row
  59.             row.child( format()).show();
  60.             tr.addClass('shown');
  61.         }
  62.     });
  63.  })
  64.     </script>
  65. </head>
  66. <body>
  67.                                      <table border="1" id="t1">
  68.                             <thead id="t1_head">
  69.                                 <tr>
  70.                             <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>
  71.                           </tr>
  72.                             </thead>
  73.                              <tbody id="t1_body">
  74.                                  {% for data in bill_data %}
  75.                                  <tr>
  76.                                    <td class="test">{{ data.contract_code }}</td>
  77.                                    <td>{{ data.contract_name }}</td>
  78.                                    <td>{{ data.cust_name }}</td>
  79.                                    <td>{{ data.con_sign_date }}</td>
  80.                                    <td>{{ data.con_eff_date }}</td>
  81.                                    <td>{{ data.con_exp_date }}</td>
  82.                                    <td>{{ data.con_state }}</td>
  83.                                    <td>{{ data.con_age }}</td>
  84.                                    <td>{{ data.con_type }}</td>
  85.                                    <td>{{ data.con_agent }}</td>
  86.                                    <td>{{ data.new_flag }}</td>
  87.                                    <td>{{ data.original_code }}</td>
  88.                                    <td>{{ data.payment }}</td>
  89.                                   </tr>
  90.                                  {% endfor %}
  91.                              </tbody>
  92.                              <tfoot id="t1_foot">
  93.  
  94.                              </tfoot>
  95.                        </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. 重构sql server的sys.sp_helptext存储

    本文目录列表: 1.sys.sp_helptext存储的功能和效果 2.重构sys.sp_helptext存储(命名为dbo.usp_helptext)提供直观的效果 3.sys.sp_helptex ...

  2. php怎么获取input输入框中的值去数据库比较显示出来

    前端: <!--商品查询--> <input type="text" name="bianhao" value="" ma ...

  3. php strtotime 在32位操作系统下的限制

    php strtotime 在32位操作系统下的限制 <?php class DateHelper{ /** * 在32位操作系统下,超过 2038-01-19 03:14:07 ,会溢出 * ...

  4. [转载]T-SQL(Oracle)语句查询执行顺序

    原文链接:http://blog.sina.com.cn/s/blog_61c006ea0100mlgq.html sql语法的分析是从右到左,where子句中的条件书写顺序,基本上对sql性能没有影 ...

  5. node-inspector调试工具应用

    一.起因 想调试某些开源的nodejs项目,然后就选择了node-inspector插件. 他的优点: 1.可以借用chrome或firefox浏览器进行调试,与前端调试融合. 2.配置简单 二.必备 ...

  6. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  7. Linux入侵检测常用命令

    find / -mtime 0 #0代表目前时间,表示从现在开始到24小时以前,有改动过内容的文件全都会被列出来.如果是3天前24小时内,则使用find / -mtime 3 find /etc -n ...

  8. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q142-Q143)

    Question 142You have a Feature that contains an image named ImageV1.png.You plan to create a new ver ...

  9. android SharedPreferences介绍

    SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一些常用的配置比如窗口状态,一般在Activity中重载窗口状态onSaveInstanceState保存一般使用 ...

  10. 字典转模型框架 Mantle的使用:国外程序员最常用的iOS模型

    Mantle简介 Mantle 是iOS和Mac平台下基于Objective-C编写的一个简单高效的模型层框架. Mantle能做什么 Mantle可以轻松把JSON数据.字典(Dictionary) ...