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 ...
随机推荐
- nginx启动脚本，手动编辑
nginx启动脚本,手动编辑 #! /bin/bash # chkconfig: - # description: nginx service XDIR=/www/server/nginx DESC= ...
- CCF-201403-3-命令行选项
问题描述 试题编号: 201403-3 试题名称: 命令行选项 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 请你写一个命令行分析程序,用以分析给定的命令行里包含哪些选项.每 ...
- Java 代码学习之理解数据类型中的坑
package dailytest; import org.junit.Test; public class DataTypeTest { /** * 当有字符串第一次参与运算后,+成了连接符的作用 ...
- bitcms内容管理系统 3.1版源码发布
开源bitcms内容管理系统采用ASP.NET MVC5+MySql的组合开发,更适应中小型系统低成本运行. bitcms的主要功能 1.重写了APS.NET MVC的路由机制.bitcms使用路由参 ...
- Foxmail 7.0破解版，拷贝到新机器后，发送邮件乱码问题
申请了新机器,挺开心,键盘和鼠标也好用了,但是新机器也随之而来一些不便,以前存储的数据需要重新拷贝.还有一些邮件,有些邮件标记了*号. Foxmail7.0绿色版本还挺好用,直接拷贝到新机器上就能直接 ...
- AspNet Core ：创建自定义 EF Core 链接数据库
这两天比较忙,写的会慢一点. 我们以控制台演示 EF Core的链接数据库 首先创建控制台程序 创建数据上下文类 EntityTable /// <summary> /// 继承 DbCo ...
- VSCode配置eslint
在Vue.js项目中,使用的是eslint检查. 而在我写完代码后,cnpm run dev运行命令...然后悲剧了,一大堆报错!╮(╯▽╰)╭ 安装插件:Vetur:这是vscode上一个vue.j ...
- 人工智能背景下的Office 365现状和发展趋势
作者:陈希章 发表于 2017年7月31日 引子 谈论人工智能是让人兴奋的,因为它具有让人兴奋的两大特征 -- 每个人都似乎知道一点并且以知道一点为荣,但又好像没多少人能真正讲的明白.毫无疑问,我也仅 ...
- linux 安装tensorflow（gpu版本）
一.安装cuda 具体安装过程见我的另一篇博客,ubuntu16.04下安装配置深度学习环境 二.安装tensorflow 1.具体安装过程官网其实写的比较详细,总结一下的话可以分为两种:安装rele ...
- （转自知乎https://www.zhihu.com/question/20794107）动态代理
作者:雨夜偷牛的人链接:https://www.zhihu.com/question/20794107/answer/23330381来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...