[HTML表格]在databases显示行的附加信息
模板代码:
<!-- 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显示行的附加信息的更多相关文章
- DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程
一.DataTables 个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...
- vc6.0如何显示行号以及出现版本不兼容问题
有时编译时,提示某某行有错,但是要定位到某一行的话,如果在编辑页面能够将行号显示出来,查找也就更方便了,下面我来介绍一下让VC6.0显示行号的方法. 工具/原料 VC6.0.显示行号的插件 方 ...
- VC++6.0 显示行号
通过VC6LineNumberAddin能够解决这个问题,方法如下. 一.下载该文件. 网上很多免费的. 二.使用方法: [1]:打开VC++6.0,点击菜单“工具(Tools) ...
- css3 之表格隔行分色显示
<html> <head> <title></title> <style type="text/css"> table{ ...
- gridcontrol显示行号,总行,打印,导出Excel,设置标头及内容居中方法
1.一般为了表格显示数据更直观,经常会显示行号以及总数.让gridcontrol显示行号,首先你需要设置一下显示行号的宽度,也就是IndicatorWith.默认值为-1,可根据实际数值需要设置宽度, ...
- （转）用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
- 文本编辑器vim——三种模式、显示行号、插入命令、行快速定位、行内定位
1.vim的三种工作模式: (1)利用vim命令新建文件: 点击entre键执行命令后,开始向文本中输入想要写入的内容: (2)命令行模式(ESC): 不管用户处于何种模式,只要单击Esc键,即可进入 ...
- Word：表格无法分页显示
造冰箱的大熊猫@cnblogs 2019/1/30 今天遇到一个Word中表格无法分页显示的问题,特记录下来以备后查 我们知道,在Word中将表格不设置为“允许跨页断行”,假设表格中第二行某个单元格的 ...
- Bootstrap-table 显示行号
趁热打铁,使用bootstrap-table时,想要显示每行的行号,再网上查了查,网上给的显示行号的大部分方法,只要一翻页,行号就会又从1开始计算, 也许没有碰到想要的,自己试着解决了这个问题,本人初 ...
随机推荐
- C#循环测试题
关于如下程序结构的描述中,哪一项是正确的? for ( ; ; ) { 循环体; //何问起 } a) 不执行循环体b) 一直执行循环体,即死循环c) 执行循环体一次d) 程序不符合语法要 ...
- 设计模式（五）建造者模式（Builder Pattern）
一.引言 在软件系统中,有时需要创建一个复杂对象,并且这个复杂对象由其各部分子对象通过一定的步骤组合而成.例如一个采购系统中,如果需要采购员去采购一批电脑时,在这个实际需求中,电脑就是一个复杂的对象, ...
- 5G
前世 1G 2G 3G 4G 今生 5G 推荐书籍: Gold Smith -<无线通信> David Tse -<无线通信基础> 参考:
- 背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令
[源码下载] 背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令 作者:webabcd ...
- java.net.SocketException: Software caused connection abort: socket write error
用Java客户端程序访问Java Web服务器时出错: java.net.SocketException: Software caused connection abort: socket write ...
- 《Ext JS模板与组件基本框架图----组件》
本节主要从七个方面讲解组件,组件时什么,它的作用,它的构架,以及怎么创建和周期还有常见的配置项,属性方法和事件以及其层级是什么都进行整理,希望对大家有帮助. 组件的基础知识.png 2 Abstrac ...
- socket.io，io=Manager(source, opts)
原文:http://www.cnblogs.com/xiezhengcai/p/3968067.html 当我们在使用 var socket = io("ws://103.31.201.15 ...
- RequireJS入门之一——实现第一个例子
为什么学习RequireJS? 像我这种菜鸟,会提到海量文章里提到的AMD.JS模块化编程.异步... ... 等等 RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理j ...
- 在 Visual Studio 等编辑器/IDE中自动切换输入法，不需要手动的有没有？
使用Visual Studio写代码,经常遇到的一个问题就是切换中文输入法麻烦,输入完注释//,要切换到中文,输入完引号,要输入中文,然后还需要切换回来,有没有? 有时候中文输入法忽然失效有没有?明明 ...
- Sanboxie 5.14安装图解
Sanboxie, 即沙盘,引用官方解释:电脑就像一张纸,程序的运行与改动,就像将字写在纸上.而Sandboxie就相当于在纸上放了块玻璃,程序的运行与改动就像写在了那块玻璃上,除去玻璃,纸上还是一点 ...