<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link media="all" href="css/jquery.dataTables.min.css"/>
<link media="all" href="css/jquery.dataTables_themeroller.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.colReorder.min.js"></script>
<style>
td{
border:1px solid #000;
}
#hh{
height:600px;
border:1px solid red;
}
div.DTCR_pointer {
margin-top: -15px;
margin-left: -9px;
width: 18px;
background: url('images/insert.png') no-repeat top left;
}
</style>
</head>
<body>
<div id="hh">
<table id="example" class="display" cellspacing="0">
</table>
</div>
<button id="refresh">
刷新
</button>
</body>
<script type="text/javascript">
function getData(){
var data=new Array(20);
for(var i=0;i<data.length;i++){
data[i]=new Array(30);
for(var j=0;j<data[i].length;j++){
data[i][j]=j+"a"+Math.floor(Math.random()*100*i*j);
}
}
return data;
}
function getColumns(){
var columns=new Array(30);
for(var j=0;j<columns.length;j++){
columns[j]={"title":"a"+(j+1)};
}
return columns;
}
var table;
$(document).ready(function(){
table=$("#example").DataTable({
stateSave: true,
columns:getColumns(),
data:getData(),
scrollY: $("#hh").height()*0.8,
"scrollX": true,
"autoWidth": true,
"destroy": true,
scrollCollapse: true,
dom: 'lfrtip'
});
new $.fn.dataTable.ColReorder( table );
$(".dataTables_wrapper").width($("#hh").width()*0.9);
$("#refresh").click(function() {
table.clear().rows.add(getData()).draw();
$("#hh").height($("#hh").height()-100);
$("#hh").width($("#hh").width()*0.9);
$(".dataTables_wrapper").width($("#hh").width()*0.9);
/*table=$("#example").DataTable({
stateSave: true,
"autoWidth": true,
columns:getColumns(),
data:getData(),
scrollY: $("#hh").height()*0.8,
//"scrollY": 200,
"scrollX": true,
"destroy": true,
scrollCollapse: true
});*/
//$(".dataTables_wrapper").width(1000);
});
});
</script>
</html>
分享到:
相关推荐
DataTable动态行转列类,设置需要装置的列名和数据列后,可以动态将DataTable的列进行转置。
对DataTable分页获取数据
根据DataTable中数据行记录改变的状态,动态生成SQL语句, 如果一个表中字段上百个,在只改了其中两三个字段时,则生成的SQL语句就只会含有这修改内容的字段, 有了这一个函数,从此彻底告别手动写SQL语句更新到...
DataTable缓存数据操作 DataTable 缓存数据操作
完美的数据报表reportViewer动态绑定DataTable数据, 1.创建窗体form1 2.拖入reportViewer1 3.解决方案中添加-数据-数据集(dataset1)-工具栏中拖入DataTable到xsd界面-添加列 DataColumn1-DataColumn4 4.解决方案...
举例讲解了数据控件DataTable的数据记录操作,当还没有做datatable.acceptChangs()操作之前对数据行发生增删改时,可取得修改前后的值。具体可看文档中的距离代码。可以直接新建Windows控制项目进行代码运行。
到附属点附属点到附属点发送到附属点发送到撒旦发啊
使用 DataTable就需要了解以下组件 DataColumn,描述数据表中的列。 DataRow,包含数据表中行的数据。 DataCell,包含数据表中单个单元格的数据。 PaginatedDataTable,它显示数据表中的部分数据,并提供对...
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
C# 两个datatable中的数据快速比较返回交集 并集或差集 网上的例子。但没有实例下载。新人有点难明白。对初学者还是有点难。完整源码。让新人学习。
datatable数据导出excel,datatable数据导出excel
分两个部分,第一个部分前台分页、排序、检索等。 第二个部分,我实现了后台分页,排序,但是检索没能实现。
在.net中内存表datatable用来暂时存储批量数据,然后用数据集dataset来批量更新数据库。一次更新批量插入。(C#+.net+SQL Server 2005)
彻底告别手动写SQL语句,一劳永逸解决数据库字段变更后...根据DataTable中数据行记录改变的状态,动态生成SQL语句, 如果一个表中字段上百个,在只改了其中两三个字段时,则生成的SQL语句就只会含有这修改内容的字段
数据存储类 将数据库表映射至DataTable 另附加查询类 FindData 对DataTable中数据再度查询 支持模糊查询,范围查询等...
DATATable数据控件经典使用,可以动态根据数据的多少生成表格,DATATable 经典分页处理,Acess数据库中时间格式处理,及第三方时间控间的使用。
利用C#saveFileDialog控件,把DataTable中的数据保存输出的文本格式
dataTable过滤重复数据并导出word的代码
从Excel_导入数据到DataTable
简单的使用打印控件实现的打印表格效果,初学者有益