datatable使用笔记
这是一个使用datatable的jsp文件实例，实现了点击单元格后编辑单元格所在行的内容。
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>场馆信息编辑</title>
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css"> <style type="text/css">
table.dataTable tr td:name {
text-align: center;
} table.dataTable tr td:name:before {
content: "\f096"; /* fa-square-o */
font-family: FontAwesome;
} table.dataTable tr.selected td:name:before {
content: "\f046"; /* fa-check-square-o */
}
</style>
<script type="text/javascript" charset="utf-8" language="javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="./dist/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" class="init">
var table;
var courtinfoarray = new Array();
$(document).ready(function() {
//获取当前点击按钮所在行的内容
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
var tdobj = $(this);
var nowTable = document.getElementById("example");
var cellArray = new Array();
var str1 = tdobj.text();
if(str1=="编辑")
{
var e = e || window.event;
var target = e.target || e.srcElement;
if (target.parentNode.tagName.toLowerCase() == "td") { //获取行号
var rowIndex1 = target.parentNode.parentNode.rowIndex;
var column = nowTable.rows[rowIndex1].cells.length-1; for(var i=0;i<column;i++)
{
cellArray[i] = nowTable.rows[rowIndex1].cells[i].innerHTML;
} //给模态框赋初始值
document.getElementById("courtName").value=cellArray[0];//场馆名
document.getElementById("openTime").placeholder=cellArray[1];//开馆时间
document.getElementById("closeTime").placeholder=cellArray[2];//闭关时间
document.getElementById("courtCount").placeholder=cellArray[3];//资源数目
document.getElementById("courtPrice").placeholder=cellArray[4];//价格 //弹出模态框
$("#myModal").modal({ keyboard:true});
} }
} );
$.post("courtinfo.action", {"dataType":"json"}, function(data, status){
var infojson = JSON.parse(data);
var i=0;
$(infojson).each(function(){
courtinfoarray[i] = new Array();
courtinfoarray[i].push(this.v_name);
courtinfoarray[i].push(this.open_time);
courtinfoarray[i].push(this.close_time);
courtinfoarray[i].push(this.num);
courtinfoarray[i].push(this.charge);
courtinfoarray[i].push(this.is_open);
i++;
});
$('#example').dataTable( {
"oLanguage": {
"sSearch": "搜索:",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "Nothing found - 没有记录",
"sInfo": "显示第 _START_ 条到第 _END_ 条记录,一共 _TOTAL_ 条记录",
"sInfoEmpty": "显示0条记录",
"oPaginate": {
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
}
},
"bStateSave": true,
"bProcessing":true,
"data": courtinfoarray,
"columns": [
{ "title": "场馆名称" },
{ "title": "开馆时间" },
{ "title": "闭馆时间" },
{ "title": "价格", "class": "center" },
{ "title": "数目", "class": "center" },
{"title":"是否开放","class":"center" },
{"title":"编辑","class":"center",defaultContent:"<button type=\"button\" class=\"btn btn-info\">编辑</button>", orderable: true}
],
order: [ 1, 'asc' ]
} );
});
}); function mysubmit()
{
alert("确定修改吗");
document.getElementById("editform").submit();
}
</script>
</head>
<body> <ul class="breadcrumb">
<li><a href="courtinfo.jsp">首页</a></li>
<li class="active">场馆信息编辑</li>
</ul>
<body>
<div class="container" style="margin-top: 10px" align="center">
<table cellpadding="0" cellspacing="0" border="0"
class="table table-striped table-bordered table-hover dispaly"
id="example">
<thead>
<tr>
<th>馆名</th>
<th>开馆时间</th>
<th>闭关时间</th>
<th>资源数目</th>
<th>价格</th>
<th width="%18">是否开放</th>
<th>编辑</th>
</tr>
</thead>
</table>
</div> <!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">编辑该馆内容</h4>
</div>
<form class="bs-example bs-example-form" action="courtedit.action" method="post" role="form" id="editform">
<div class="input-group">
<span class="input-group-addon">场馆名称</span> <input
type="text" class="form-control" placeholder="" id="courtName" readonly="readonly" name="courtname">
</div>
<div class="input-group">
<span class="input-group-addon">开馆时间</span> <input type="text"
class="form-control" placeholder="" id="openTime" name="opentime">
</div>
<div class="input-group">
<span class="input-group-addon">闭馆时间</span> <input type="text"
class="form-control" placeholder="" id="closeTime" name="closetime">
</div>
<div class="input-group">
<span class="input-group-addon">资源数量</span> <input type="text"
class="form-control" id="courtCount" placeholder="" name="courtcount">
</div>
<div class="input-group">
<span class="input-group-addon">场馆价格</span> <input type="text"
class="form-control" id="courtPrice" placeholder="" name="courtcharge">
</div>
<div class="input-group">
<span class="input-group-addon">是否开放</span>
<select class="form-control" id="openornot" name="isopen">
<option>开放</option>
<option>闭馆</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="mysubmit()">提交更改</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
datatable使用笔记的更多相关文章
- DataTable学习笔记---排序细则、列隐藏
耽误了好几天,因为要做一个嵌入式的实验-android内核编译与裁剪,很久之前装的wubi不知道为什么运行出错了,然后看着当前的win7系统觉得有点讨厌了,也是因为快1年半没装机了,所以就重新装机了, ...
- DataTable学习笔记 - 01
DataTable 是 jQuery 的一个插件. 代码上来吧, <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 路由其实也可以很简单-------Asp.net WebAPI学习笔记（一） ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换
路由其实也可以很简单-------Asp.net WebAPI学习笔记(一) MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...
- CUBRID学习笔记 32 对net的datatable的支持 cubrid教程
在net的驱动中实现理一下的支持 DataTable data populate Built-in commands construct: INSERT , UPDATE, DELETE Column ...
- C# 学习笔记03 DataTable
1. DataTable 类对象表示一个内存中数据表.可以用来存放从数据库得到的DataSet. DataTable dt = SqlHelper.ExecuteDataTable(parameter ...
- datatable 笔记 服务器端查询
var vTable = ""; $("#vip_data").dataTable({ "scrollY": 400, //竖向高度 滚动 ...
- C#学习笔记-DataTable导出到EXCEL（一）
public void DataTabletoExcel(DataTable dt, string path) { StreamWriter sw = new StreamWriter(path, f ...
- 第八周学习笔记-ADO.Net中DataTable的应用
ADO.Net中DataTable的应用 一.知识点描述 1.概述:DataTable是一个临时保存数据的网格虚拟表(表示内存中数据的一个表),是ADO.Net库中的核心对象. 2.DataTabl ...
- .NET小笔记-NPOI读取excel内容到DataTable
下载比较新的NPOI组件支持excel2007以上的,把.dll添加引用 引入命名空间 using NPOI.HSSF.UserModel;using NPOI.SS.UserModel;using ...
随机推荐
- 03.redis与ssm整合（mybatis二级缓存）
SSM+redis整合 ssm框架之前已经搭建过了,这里不再做代码复制工作. 这里主要是利用redis去做mybatis的二级缓存,mybaits映射文件中所有的select都会刷新已有缓存,如果不存 ...
- [C#]使用Process的StandardInput与StandardOutput写入读取控制台数据
本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.0及以 ...
- C++课程设计报告总结
C++课程设计报告 学院:计算机学院 班级:计科141班 姓名:刘建伟 学号:201400814125 指导老师:王璐 C++课程设计实验报告 学号:2014008 ...
- Java SE 8 流库（二）
1.3. filter,map,flatMAP方法 流的转换会产生一个新流,它的元素派生出自另一个流中的元素: Stream<T> filter(Predicate<? super ...
- Linux定义变量的脚本
现有两段基本一样的代码,只是变量进行改变,其他都没有变化,但是执行过程中出现了不一样的结果 代码一: vi back.sh #backup import file,such as /etc/rc.lo ...
- PHP运算符优先级 运算符分类
运算符 运算符是可以通过给出的一或多个值(用编程行话来说,表达式)来产生另一个值(因而整个结构成为一个表达式)的东西. 运算符可按照其能接受几个值来分组.一元运算符只能接受一个值,例如 !(逻辑取反运 ...
- Python 点滴 IV
[继承示意图] 类是实例的工厂, OOP就是在树中搜索属性,类事实上就是变量名与函数打成的包 . 每一个class语句会生成一个新的类对象 . 每次类调用时,就会生成一个新的实例对象 . 实例自己主动 ...
- libgdx3D第三讲-场景载入
第三讲 场景载入 Loading a scene with LibGDX 网易云地址:id=442771fd5cc6ce8cf9fd30b838a76343&type=note" s ...
- python自动化--文件处理
文件处理 格式 打开 f=open('a.txt',mode='r',encoding='utf-8') 读写 data=f.read() print(data) 关闭 f.close() 流程分析: ...
- 大数据学习（6）MapReduce应用
倒排索引 /** * * * <pre> *file1.txt: *hello ketty *hello tomcat * *file2.txt: *hello hadoop * *map ...