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 ...
随机推荐
- sklearn.neighbors.kneighbors_graph的简单属性介绍
connectivity = kneighbors_graph(data, n_neighbors=7, mode='distance', metric='minkowski', p=2, inclu ...
- docker学习（一）
docker的安装 (一)环境要求: 容器需要管理工具.runtime 和操作系统,选择如下: 1.管理工具 - Docker Engine 2.runtime - runc 3.操作系统 (二)安装 ...
- MySQL服务找不到了，navicat打不开数据库连接
今天打开Navicat看看连接名,突然发现连接不上了,打开服务发现MySQL服务不见了,所以手动安装了遍MySQL服务. 详细步骤如下: 1.管理员身份打开cmd,切换到MySQL安装目录下的bin目 ...
- 51Nod 1007 正整数分组 01背包
将一堆正整数分为2组,要求2组的和相差最小.例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的.Input第1行:一个数N,N为正整数的数量.第2 - ...
- Redis各个数据类型的使用场景
Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). Redis列表命令 参考:http://www.r ...
- 最全最详细：ubuntu16.04下内核编译以及设备驱动程序的编写（针对新手而写）
写在前面:本博客为本人原创,转载请注明出处!同时,本博客严禁任何下载站随意抓取!!! 本博客唯一合法URL: 总体考虑 要去写设备驱动程序,说白了就三大步骤:下载内核源码构建内核源码树(也就是下载你的 ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- C# 在RichTextBox中滚动鼠标时滚动的是父窗口的滚动条
1. RichTextBox u2 = new RichTextBox(); 2. 先记住日RichTextBox没有显示滚动条时的总宽度和显示宽度 u2.Width - u2.ClientSize. ...
- OBS源码解析（3）OBSApp类介绍
OBSApp类有以下功能: 1.负责配置文件管理 2.版本信息管理 3.主界面OBSBasic对象管理 4.obs模块初始化 class OBSApp : public QApplication { ...
- Microsoft Visual Studio | VS打开解决方案时加载失败，或者出现错误提示
Microsoft Visual Studio | VS打开解决方案时加载失败,或者出现错误提示 1.加载失败并且输出状态栏也没什么错误提示的话,往往是因为一个低版本VS2010.VS2012等打开了 ...